反应类的构造函数是否只调用一次答案

【问题标题】：Is constructor of react class called only once反应类的构造函数是否只调用一次
【发布时间】：2018-08-26 18:52:42
【问题描述】：

我有一个类说 NewVersionPopUp（单击添加按钮时调用）它有自己的构造函数。我有另一个类 ApplicationView，它有自己的构造函数。这俩类在同一个文件中。现在在 ApplicationView 我有一个方法 onClose 当我单击该弹出窗口（模态）的关闭按钮时，它将被调用。关闭时我想将一些在 NewVersionPopUp 类构造函数中定义的变量设置为 false。 onClose 我在做

this.setState({
  nameValid: false,
  descValid: false,
  fileValid: false
});

在控制台上我收到错误，因为 nameValid 未定义。因为 nameValid、descValid、fileValid 是未在声明 onClose 的同一类中定义。那么，如何将 NewVersionPopUp 这个变量传递给 ApplicationView 类，以便我可以使用 onClose 函数。而且类的构造函数是否只加载一次？每次都不会被调用当我点击添加按钮时。

class ApplicationView extends Component {
  constructor(props) {
    super(props);
    this.state = {
        message: 'welcome'
    };
  onClosePopup () {
    this.setState({
            address: '',
            nameValid: false,
            descValid: false
        });
  }
  render() {
    return (
      <div>
        <button onClick={toggleChildMenu.bind(this)}>
          Toggle Menu from Parent
        </button>
        <NewVersionPopUp onClose={this.onClosePopup}/>
      </div>
    );
  }
}



class NewVersionPopUp extends React.Component {
    super(props);
    this.state = {
        nameValid: false,
        descValid: false
    };

    validateForm() {
        // check if name and description is valid and then set nameValid, descValid => true
    }
    render() {
        return (<div><button onClick={() => onSubmit}>Push me</button></div>
        <div><button isDisabled={!nameValid && !descValid} onClick={() => onClose}>Close</button></div>
        )
    }
}

【问题讨论】：

在此处显示 2 个组件 ...

标签： javascript reactjs

【解决方案1】：

组件的构造函数在它被挂载到 DOM 之前被调用。你需要在这里做什么：

为这些组件创建父级
将 props 传递给子/兄弟（取决于您的逻辑是否编写在父组件中）

因此您可以轻松访问 ApplicationView 中的这些道具。您只需要在组件之间建立关系，因为它们不在树中。

【讨论】：