包装第三方库

Question

让我将问题简化为以下人工情况：

子组件是父级的子组件，使用方式如下：

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

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

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

Answer 1

react中的数据流是一个单向流，从父流到子流。

子级通常会使用回调(或事件处理程序)将数据传回父级。

一个儿童的组成部分不应该知道它的父母或兄弟姐妹，它应该只关心自己，在某些情况下，它自己的孩子。

例如，具有文本输入和按钮的子节点。它将以自己的状态管理输入的值，并通过按钮的onClick事件返回输入的值。

父级将如何处理此值？孩子的成分并不是很在乎。处理程序事件通过父事件传递给它，子事件将使用其状态的值调用它。这就是孩子所需要知道的。

下面是一个正在运行的小示例：

​

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>

​