javascript - 通过 ReactJS 上的 3 级组件进行通信

Question

我是 React 的新开发者，显然我在如何通过组件传递数据方面遇到了困难。我在 CodePen 上创建了一个示例来尝试理解流程。该示例只是从模态到主级别返回值的示例。

我有以下层次结构:

• 主要
  • 内部组件
    • 表格
      • 输入字段

在我的主要组件内，我有一个范围，我想在输入字段内的文本被键入时更新它。

我使用 props 来传递回调并返回我需要的值。 那么，是否有更好的方法将这些更改传递到我的主级别？

PS:我在 StackOverflow 上看到了很多示例，但如果没有 Redux 或 Flux，我看不到这个示例。

我的代码:

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
    this.onUpdateLabel = this.onUpdateLabel.bind(this);
  }
  
  onUpdateLabel(value) {
    this.setState({ text: value });
  }
  
  render() {
    let value = this.state.text != '' ? this.state.text : 'Waiting...';
    return (
      <div>
        <h1>Main</h1>
        <span class='label'>{value}</span>
        <hr />
        <Modal onUpdateLabel={this.onUpdateLabel} />
      </div>
    );
  }
}

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

  render() {
    this.props.text = 'Inside Component';
    return (
      <div>
        <h2>Modal</h2>
        <Form onUpdateLabel={this.props.onUpdateLabel} />
      </div>
    )
  }
}

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
    this.onClickButton = this.onClickButton.bind(this);
    this.onUpdateText = this.onUpdateText.bind(this);
  }
  
  onUpdateText(e) {
    this.setState({ text: e.target.value });
  }
  
  onClickButton() {
    this.props.onUpdateLabel(this.state.text);
  }
  
  render() {
    return (
      <div>
        <h3>Form</h3>
        <input type='text' placeholder='Type something' onChange={this.onUpdateText} />
        <button onClick={this.onClickButton}>Click</button>
      </div>
    );
  }
}

ReactDOM.render(
  <Main />, 
  document.getElementById('app')
);

<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="app"></div>

Answer 1

您可以使用Context但正如文档中所述:

It is an experimental API and it is likely to break in future releases of React.

如果您决定仍然使用它，您可以编写类似的内容:

class Main extends React.Component {
  static childContextTypes = { // Define the child context
      onUpdateLabel: PropTypes.func,
  }

  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
    this.onUpdateLabel = this.onUpdateLabel.bind(this);
  }

  onUpdateLabel(e) {
    this.setState({ text: e.target.value });
  }

  getChildContext(){ // Return the wanted context
      return {
          onUpdateLabel: this.onUpdateLabel,
      }
  }

  render() {...}
}

并在您的表单

中

class Form extends React.Component {

  static contextTypes = { // Define the available context
      onUpdateLabel: PropTypes.func,
  }

  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
    this.onClickButton = this.onClickButton.bind(this);
    this.onUpdateText = this.onUpdateText.bind(this);
  }

  onUpdateText(e) {
    this.setState({ text: e.target.value });
  }

  onClickButton() { // Retrieve it from context instead of props
    this.context.onUpdateLabel(this.state.text);
  }

  render(){...}
}

您在主元素中定义上下文，并在子元素之一中使用它。