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} />
    }
}

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

问题在于，当我和page === 'foo'插入100到<input/>并切换到page !== foo时，100在{{1 }}，共<input/>。

即如果我将page !== foo的{{1}}称为<input/>，将另一个称为page === 'foo'，

将foo input插入bar input
将页面切换到100，然后呈现foo input
page !== foo在bar input

但是每个100的实际值都有其自己的值。即

bar input：

值：<input>，占位符：foo input，显示值：100

10：

值：100，占位符：bar input，显示值：''

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

我认为发生此问题是由于React的VirtualDOM。当每个元素之间存在差异时，渲染器仅更改其DOM。因此，每当我更改属性时，该元素都不会更改，并且20元素中的bar input也不会更改。

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

Answer 1

也许您可以通过将动态事件绑定与组件的render方法脱钩，以处理React的渲染和DOM扩散的这种特性，来解决此问题。

为什么不使用当前使用不同事件处理程序的有条件渲染组件，而是为什么不使用更通用的事件处理程序来选择更有效的渲染实现（即没有条件分支），该事件处理程序根据您的{{1 }}状态？

例如，您可以遵循以下模式（伪代码）：

kindOfPage

Answer 2

假设我是对的，我想您可以在输入中添加一个key属性来解决此问题。像这样：

renderInput () {
        var page = this.state.kindOfPage
        var rState = this.state.reduxState;
        if (page === 'foo') {
            // foo input
            // eg. rState.value === 10
            return <input type="string" placeholder={rState.value1} key={"input1"}
                          onChange={this.handleBar} />
        } else {
            // bar input
            // eg. rState.value === 20
            console.log('test')
            return <input type="string" placeholder={rState.value} key={"input2"}
                          onChange={this.handleFoo} />
        }
  }

React渲染相同元素的动态组件

2 个答案: