Question

让我将问题简化为以下人工案例：

Child是Parent的子组件，使用如下：

<Parent>
   <Child parentColor=32/>
</Parent>

现在，Child需要设置Parent的颜色。

基本上，我应该在哪里/如何处理Child需要访问Parent的DOM元素的情况。

Answer 1

反应中的数据流是从父母到子女的单向流孩子们通常会使用回调（或事件处理程序）将数据传递回父级。

儿童成分应该对其父母或兄弟姐妹一无所知，它应该只关心自己，在某些情况下只关心自己的孩子。

例如，具有文本输入和按钮的Child。它将在自己的状态下管理输入值，并通过其按钮的onClick事件传回其输入值。

父母会对此值做什么？ Child组件并不真正关心。处理程序事件通过父级传递给它，而子级将使用其状态中的值调用它。这就是孩子需要知道的全部内容。

这是一个小例子：

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  onChange = ({ target }) => {
    this.setState({ value: target.value });
  }

  onSubmit = () => {
    const { onSubmit } = this.props;
    onSubmit(this.state.value);
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <input
          placeholder="type a color"
          type="text"
          value={value}
          onChange={this.onChange}
        />
        <button onClick={this.onSubmit}>Change Color</button>
      </div>
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'green'
    };
  }

  onColorChange = color => this.setState({ color });

  render() {
    const { color } = this.state;
    return (
      <div style={{ backgroundColor: color }}>
        <Child onSubmit={this.onColorChange} />
      </div>
    );
  }
}

ReactDOM.render(<Parent />, 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>

包装第三方库

1 个答案: