Question

我已经创建了一个非常小的应用程序来演示我的查询。

下面显示的代码具有使用ReactDOM.render将组件动态添加到DOM的功能，并且该组件带有一个称为title的属性，但是当我更新父组件的标题（处于状态）时，DynamicComponent不会更新

import React from 'react';
import ReactDOM from 'react-dom';

const DynamicComponent = (props) => {
    return (
        <div style={{ 'border': '2px dotted green' }} >Dynamic Component : {props.title}</div>
    )
}

class App extends React.Component {
    state = {
        title: 'Iam Title'
    }

    addBlock = () => {
        return ReactDOM.render(<DynamicComponent title={this.state.title} />, document.getElementById('dynamiccomponents'))
    }

    render() {
        return (
            <div>
                <div>Value in state: <b>{this.state.title}</b></div>
                <p><b>&lt;DynamicComponent /&gt;</b> Added Initially</p>
                <DynamicComponent title={this.state.title} />
                <br />
                <p><b>&lt;DynamicComponent /&gt;</b> Added By ReactDOM.render will be shown below: </p>
                <div id="dynamiccomponents"></div>



                <button onClick={this.addBlock} >Click to Dynamic Component</button>
                <button onClick={() => this.setState({ title: `Update Title` })} >Update Title</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

第一个按钮用于添加DynamicComponent，可以按预期工作。第二个按钮用于更新状态下的标题，现在标题已更改，但DynamicComponent仍未更新。

我什么都没有，我该如何解决此问题，我们将不胜感激

谢谢

Answer 1

这是因为调用addBlock时，您只向<DynamicComponent title={this.state.title} />渲染一次<div id="dynamiccomopnents"></div>。

通过单击按钮更新title的状态时，它将重新运行应用程序的render函数，但是this.addBlock不会在您的render中再次运行功能，因此您的标题不会更新。您可以通过再次单击调用this.addBlock的按钮来进行验证。它将使用更新的标题再次呈现您的组件。

我建议您引入某种状态来有条件地渲染组件，而不要使用ReactDOM.render。这样，每次运行render方法时，组件都将重新呈现。这是一个示例：

import React from 'react';
import ReactDOM from 'react-dom';

const DynamicComponent = (props) => {
  return (
    <div style={{ 'border': '2px dotted green' }} >Dynamic Component : {props.title}</div>
  )
}

class App extends React.Component {
  state = {
    title: 'Iam Title',
    showBlock: false,
  }

  addBlock = () => {
    // this method now sets `this.state.showBlock` to true
    this.setState({ showBlock: true });
  }

  renderBlock = () => {
    // return any component you want here, you can introduce some conditional
    // logic or even return nested elements, for example:
    return (
      <div>
        <p>Dynamic Component!</p>
        <DynamicComponent title={this.state.title} />
      </div>
    );
  }

  render() {
    return (
      <div>
        <div>Value in state: <b>{this.state.title}</b></div>
        <p><b>&lt;DynamicComponent /&gt;</b> Added Initially</p>
        <DynamicComponent title={this.state.title} />
        <br />
        <p><b>&lt;DynamicComponent /&gt;</b> Added By ReactDOM.render will be shown below: </p>

        {/* This will run `this.renderBlock` only if `this.state.showBlock` is true */}
        {this.state.showBlock && this.renderBlock()}



        <button onClick={this.addBlock} >Click to Dynamic Component</button>
        <button onClick={() => this.setState({ title: `Update Title` })} >Update Title</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 2

状态更改后，您可以使用LifeCycle方法componentDidUpdate()

重新呈现组件。

    import React from "react";
import ReactDOM from "react-dom";

const DynamicComponent = props => {
  return (
    <div style={{ border: "2px dotted green" }}>
      Dynamic Component : {props.title}
    </div>
  );
};

class App extends React.Component {
  state = {
    title: "Iam Title"
  };

  addBlock = () => {
    return ReactDOM.render(
      <DynamicComponent title={this.state.title} />,
      document.getElementById("dynamiccomponents")
    );
  };
  componentDidUpdate() {
    return ReactDOM.render(
      <DynamicComponent title={this.state.title} />,
      document.getElementById("dynamiccomponents")
    );
  }

  render() {
    return (
      <div>
        <div>
          Value in state: <b>{this.state.title}</b>
        </div>
        <p>
          <b>&lt;DynamicComponent /&gt;</b> Added Initially
        </p>
        <DynamicComponent title={this.state.title} />
        <br />
        <p>
          <b>&lt;DynamicComponent /&gt;</b> Added By ReactDOM.render will be
          shown below:{" "}
        </p>
        <div id='dynamiccomponents'></div>

        <button onClick={this.addBlock}>Click to Dynamic Component</button>
        <button onClick={() => this.setState({ title: `Update Title` })}>
          Update Title
        </button>
      </div>
    );
  }
}

export default App;

Answer 3

ReactDOM.render仅渲染一次元素。它会创建另一棵未连接到第一棵树的树。也就是说，React不会跟踪您可能曾经调用过的所有ReactDOM.render，并且不会使用用于创建它们的数据来更新它们

如果您需要在App组件之外的DOM树中的某个位置呈现元素，但又希望将其与App组件连接（以便对状态更改做出反应），请使用ReactDOM.createPortal

ReactDOM.render不会在道具更改时更新组件

3 个答案: