React 组件无法同步由动态 ReactDOM.render 创建的道具

React component could not sync props which created by dynamic ReactDOM.render

本文关键字：创建 render ReactDOM 动态 组件 同步 React      更新时间：2023-09-26

当我使用 React+Redux+Immutable 时，我遇到了一个问题：通过动态方式创建的组件，当 props 更改时，组件不会重新渲染。是反应错误吗？

我删除了业务代码，只是这里的 React 代码：http://codepen.io/anon/pen/GoMOEZ

或以下：

import React from 'react'
import ReactDOM from 'react-dom'
class A extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'tom'
        }
    }
    dynamic() {
        ReactDOM.render(<B name={this.state.name} changeName={this.changeName.bind(this)} type={false}/>, document.getElementById('box'))
    }
    changeName() {
        this.setState({
            name: 'tom->' + Date.now()
        });
    }
    render() {
        return <div>
            top name: {this.state.name}
            <B name={this.state.name} changeName={this.changeName.bind(this)} type={true}/>
            <div id="box"></div>
            <button onClick={this.dynamic.bind(this)}>dynamic add component</button>
        </div>
    }
}
class B extends React.Component {
    render() {
        return <div>
            {this.props.type ? '(A)as sub component' : '(B)create by ReactDOM.render'}
            - name:【{this.props.name}】
            <button onClick={this.props.changeName}>change name</button>
        </div>
    }
}
ReactDOM.render(
    <A/>,
    document.getElementById('example')
);

这不是一个错误，它只是不是做你想做的事的反应方式。每次调用A.render都将覆盖<div id="box">...</div>删除A.dynamic添加的元素。

更惯用的方法是添加一些标志，将其设置onClick处理程序中，并在A.render中使用它来决定<div id="box">是否应该为空。

请参阅代码笔上编辑的代码：http://codepen.io/anon/pen/obGodN

相关部分在这里：

class A extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        name: 'tom',
        showB: false // new flag
      }
    }
    changeName() {
        this.setState({
          name: 'tom->' + Date.now()
        });
    }
    // changing flag on button click
    showB() {
        this.setState({showB: true})
    }
    render() {
        // `dynamic` will contain component B after button is clicked 
        var dynamic;
        if(this.state.showB) {
          dynamic = <B
            name = {this.state.name}
            changeName = {this.changeName.bind(this)}
            type = {false} />
        }
        return <div>
          top name: {this.state.name}
          <B name = {this.state.name}
             changeName = {this.changeName.bind(this)}
             type = {true}/>
          <div>{dynamic}</div>
          <button onClick = {this.showB.bind(this)}>
            dynamic add component
          </button>
        </div>
      }
    }

更新
您仍然可以使用您的方法，但您需要手动更新动态创建的组件。

例如，您可以在changeName函数中手动重新渲染它。

  changeName() {
    this.setState({
      name: 'tom->' + Date.now()
    }, this.dynamic.bind(this));
  }

请注意，this.dynamic作为第二个参数传递以this.setState这可确保在状态真正更新时调用它。只需在this.setState({...})之后添加this.dynamic()将使用尚未更新的状态。

代码笔在这里： http://codepen.io/anon/pen/EPwovV

相关文章：