React:更改模式的内容而不将整个DOM元素作为支持传递？

Question

我是新的反应，目前，我试图在我的项目中建立一个两个事实-8月模式类似的用户界面。

Modal看起来也比较样本。

1. 标题
2. 一条信息
3. 模态内容(可以是输入框，也可以是一个或多个下拉选项，也可以只是显示字符串)
4. 扣子

想象一下有一些模式:第一个要求你输入你的电话号码。打完你的电话号码后，它会直接进入第二个模式，第二个模式会显示你输入的电话号码并要求你确认，第三个模式会显示其他东西等等。

我的方法是使用ReactStrap构建自己的模态组件。

export default class ModalControl extends React.Component{
    render(){
        return(
            <div>
                <Modal isOpen={this.props.isOpen}>
                    <ModalHeader >{this.props.title}</ModalHeader>
                    <ModalBody>
                        <p>{this.props.message}</p>
                        <p>{"Content that is change dynamically"}</p>
                    </ModalBody>
                    <ModalFooter>
                        <Button color="info" onClick={() => this.props.clickAction>{this.props.buttonLabel}</Button>
                    </ModalFooter>
                </Modal>
            </div>
        )
    }
}

然而，我的问题之一是改变情态内容。由于Modal不知道它本身是否包含selection、'A input box'或“Just a string”，我应该如何做才能使ModalControl能够接收动态变化的内容？

我的尝试：尝试将整个DOM元素作为一个字符串传递给模态并在modalControl中解析它。然而，我读过一篇这样的文章，说传递Dom元素是不建议的反应。

在我的主要，我有这样的东西，但显然它不是渲染

<ModalControl
    isOpen={true}
    title={"Code Authentication"}
    message={"For your security, we need to verify your identity by sending a code to your phone number"}
    buttonLabel={"Verify Code"}
>
<div className="row">
          <div className="col-sm-6">
              {this.getPhoneList()}
          </div>
          <div className="col-sm-6">
              {this.getMethodList()}
          </div>
</div>
</ModalControl>

What i want to achieve：如何实现其模态内容动态变化的模态类？由于我是新的反应，我不确定这是否最佳做法。如果没有，是否有更好的方法？

Answer 1

您必须维护一个包含可以动态更改的变量的状态。

首先你设定了州。

constructor(props) {
  super(props);

  this.state = {
    variableX: "default string"
  };
}

然后，可以使用React的setState()方法更新状态

this.setState({
  variableX: "updated string"
});

在呈现方法中，您可以访问变量。

render() {
 const { variableX } = this.state;     

 return (
  <div>{variableX}</div>
 );
}

您还可以将状态作为支持传递给子组件。

// Parent component
render() {
 const { variableX } = this.state;     

 return (
  <div>
   <ChildComponent variableX={variableX} />
  </div>
 );
}

// Child component
render() {
 const { variableX } = this.props;     

 return (
  <div>
   {variableX}
  </div>
 );
}

有一件事要注意的是，你从来不想改变这个州。您可以在大型应用程序中使用"react状态不可变性“这一术语搜索许多文章：https://reactjs.org/docs/state-and-lifecycle.html，在大型应用程序中，维护状态更加困难，并且不想一直传递属性，可以考虑使用Redux with React：https://redux.js.org/basics/usagewithreact