javascript - 在 ReactJS 中将 Prop 从一个组件传递到另一个组件返回未定义

Question

我是 React 的新手，我正在尝试将 props 从一个 React 组件传递到另一个组件。请考虑下面的代码并告诉我我可能做错了什么。您会注意到，我正在尝试使用 this.props.value 这样做，但我在控制台中得到的只是“未定义”。我设法通过将所有 HTML 元素放在一个组件中来运行代码，它运行得非常好。

class Editor extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      input: defaultTxt
    };
    this.inputChanges = this.inputChanges.bind(this);
  }

  inputChanges(e) {
    this.setState({
      input: e.target.value
    });
  }

  render() {
    return (
      <div>
        <div id="editorBar">
          Editor
          <i className="fa fa-expand expand" />
        </div>
        <textarea
          id="editor"
          style={editorStyle}
          value={this.state.input}
          onChange={this.inputChanges}
          placeholder={defaultTxt}
        />
      </div>
    );
  }
}

//preview

class Previewer extends React.Component {
  render() {
    return (
      <div>
        <div id="previewerBar">
          Preview
          <i className="fa fa-expand expand" />
        </div>
        <div
          id="preview"
          style={viewerStyle}
          dangerouslySetInnerHTML={{ __html: this.props.value }}
        />
      </div>
    );
  }
}

//wrapper

class Wrapper extends React.Component {
  render() {
    return (
      <div id="wrapper">
        <Editor />
        <Previewer />
      </div>
    );
  }
}

const defaultTxt = `Some default text`;

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

Answer 1

它应该是这样的:

class Editor extends React.Component {
  render() {
    return (
      <div>
        <div id="editorBar">
          Editor
          <i className="fa fa-expand expand" />
        </div>
        <textarea
          id="editor"
          style={editorStyle}
          value={this.props.input}
          onChange={this.props.inputChanges}
          placeholder={defaultTxt}
        />
      </div>
    );
  }
}

//preview

class Previewer extends React.Component {
  render() {
    return (
      <div>
        <div id="previewerBar">
          Preview
          <i className="fa fa-expand expand" />
        </div>
        <div
          id="preview"
          style={viewerStyle}
          dangerouslySetInnerHTML={{ __html: this.props.value }}
        />
      </div>
    );
  }
}

//wrapper

class Wrapper extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      input: defaultTxt
    };
    this.inputChanges = this.inputChanges.bind(this);
  }

  inputChanges(e) {
    this.setState({
      input: e.target.value
    });
  }

  render() {
    return (
      <div id="wrapper">
        <Editor input={this.state.input} inputChanges={this.inputChanges}/>
        <Previewer value={this.state.input}/>
      </div>
    );
  }
}

const defaultTxt = `Some default text`;

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

想法是 Wrapper 组件 将成为保存状态和控制状态变化的组件。 Editor 和 Previewer 是它的子项，它们接收数据以显示和调用回调 prop。