在ReactJS中，从一个组件传递props到另一个组件会返回undefined。

Question

我是 React 的新手，正在尝试将 props 从一个 React 组件传递到另一个组件。请查看我的代码，并告诉我可能出了什么问题。 如您所见，我正尝试使用 this.props.value 进行传递，但是在控制台上得到的只是 "undefined"。当我将所有 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'));

- Vo_

---

如果您想在编辑器中键入某些内容并在预览中显示，那么如果您想在两个组件之间共享状态，则确实希望将状态/状态方法放在“Wrapper”中。 - Andy

docs - xadm

你是如何将 props 传递给 Previewer 组件的？我期望看到类似 <Previewer value={value} /> 的东西，但却找不到它。 - wang

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 )是它的子组件，接收要显示的数据并调用回调属性。

- You Nguyen

Answer 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>

- Andy