在 ReactJS 中将 props 从一个组件传递到另一个组件返回 undefined答案

【问题标题】：Passing props from one component to another in ReactJS returns undefined在 ReactJS 中将 props 从一个组件传递到另一个组件返回 undefined
【发布时间】：2019-03-17 13:49:41
【问题描述】：

我是 React 的新手，我正在尝试将道具从一个 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'));

【问题讨论】：

如果你想在编辑器中输入一些东西并让它出现在预览中，如果你想在两个组件之间共享状态，你真的希望你的状态/状态方法在Wrapper 中。跨度>
docs
你是如何将 props 传递给 Previewer 组件的？我期待之类的东西，但找不到。

标签： javascript reactjs components

【解决方案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 component 将是持有状态并控制状态变化的那个。 Editor 和 Previewer 是它的子节点，它们接收数据以显示和调用回调属性。

【讨论】：

【解决方案2】：

如果两个组件共享状态，则将状态提升到父组件 - 在本例中为 Wrapper。由于两个子组件都没有状态，因此可以将它们编码为无状态函数。

function Editor({ text, handleChange }) {
  return (
    <div>
      <div id="editorBar">Editor
        <i className="fa fa-expand expand" />
      </div>
      <textarea id="editor" value={text} onChange={handleChange} />
    </div>
  );
}

function Previewer({ text }) {
  return (
    <div>
      <div id="previewerBar">Preview
        <i className="fa fa-expand expand"></i>
      </div>
      <div id="preview" dangerouslySetInnerHTML={{__html: text}}></div>
    </div>
  );
}

class Wrapper extends React.Component {

  constructor(props) {
    super(props);
    this.state={ input: props.defaultText }
    this.handleChange = this.handleChange.bind(this);
  }

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

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

const defaultText = 'Some default text';

ReactDOM.render(<Wrapper defaultText={defaultText} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：