javascript - React 渲染相同的元素，它是动态组件

Question

我不知道怎么称呼这种情况。正在跟进

我有一个渲染一个动态组件

<input type="text" placeholder={this.props.reduxStateValue} />

即

function dynamicInput() {
    var page = this.props.kindOfPage,
        rState = this.props.reduxState;
    if (page === 'foo') {
        // foo input
        // eg. rState.value === 10
        return <input type="text" placeholder={rState.value} 
                      onChange={this.handleFoo} />
    } else {
        // bar input
        // eg. rState.value === 20
        return <input type="text" placeholder={rState.value} 
                      onChange={this.handleBar} />
    }
}

上面的例子是非常简单的verion。每个组件都有许多不同的东西 this.props.kindOfPage .

问题是当 page === 'foo'然后我插入 100进入<input/>并切换到 page !== foo , 100在<input/>的 page !== foo .

即 如果我调用 <input/>的 page === 'foo'案例为 foo input另一个是bar input ,

1. 插入 100进入foo input
2. 将页面切换到page !== foo然后bar input呈现
3. 100在bar input

但是每一个的真正值(value)<input>有自己的值(value)。 即

1. foo input :

值:100 , 占位符:10 , 显示值:100

1. bar input :

值:'' , 占位符:20 , 显示值:100

我想做的是 bar input显示其占位符 20因为 我们没有在 bar input 中插入值 100 .

我认为这个问题是因为 React 的 VirtualDOM 引起的。当每个元素之间存在差异时，渲染器只会更改其 DOM。因此，每当我更改属性时，元素都不会更改并且 value的 input元素也没有改变。

但是，我想将两者分开并显示不同的值。有什么想法吗？

Answer 1

也许您可以通过将动态事件绑定(bind)与组件的渲染方法解耦来处理 React 渲染和 DOM 差异的这一特性，从而稍微不同地解决这个问题。

与其像现在这样使用不同的事件处理程序有条件地渲染组件，不如选择更高效的渲染实现(即没有条件分支)，方法是使用一个基于您的 动态调用适当事件的通用事件处理程序kindOfPage 状态？

例如，您可以遵循以下模式(伪代码):

function handleGeneric(event) {

    var page = this.props.kindOfPage;

    // Introduce dynamic branching in "generic" event handler, like so
    switch(page) {
      case 'foo':{
        this.handleFoo(event)
        break;
      }
      default:{
        this.handleBar(event)
        break;
      }
    }
}

function dynamicInput() {
    var rState = this.props.reduxState;

    // Simplyify your render method in this way, and delegate conditional
    // branching to event handler    
    return <input type="text" placeholder={rState.value} 
                  onChange={ event => this.handleGeneric(event) } />
}