javascript - 我可以将 setState 从父组件传递到子组件吗？

Question

React 的文档建议将函数作为属性传递给子组件，以便更改父组件的状态变量。我发现这种设计对于拥有许多不同子组件的 parent 来说有点困惑。

我开始这样做:

constructor(props) {
  super(props);
  const that = this;
  this.state = {
    parentData : '',
    setState : function(obj) { // <--
      that.setState(obj)
    }
  };
}
render() {
  <Child prop={this.state} />
}

然后在我需要更改父状态时在 child 中:

childFunction() {
  props.setState({ parentData: 'new data'})
}

这种实现有什么缺点吗？

Answer 1

你不应该做的一件事是实际上将此函数存储在父组件的 state 上，但是将一个函数从父组件传递给子组件可能最终更新父组件的状态是有效的并且 frequently在 React 中使用模式。

const Child = ({ updateParent }) => (
  <div id="child">
    <button onClick={() => updateParent(Math.random())}>
      Update Parent
    </button>
  </div>
);

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data : ''
    };
  }
  render() {
    return (
      <div id="parent">
        <h3>Data: {this.state.data}</h3>
        <Child updateParent={(data) => this.setState({ data })} />
      </div>
    )
  }
}

ReactDOM.render(
  <Parent />,
  document.querySelector('#example')
)

#parent {
  height: 150px;
  padding: 5px;
  background: olivedrab;
  color: #fff;
}

#parent:before {
  content: 'Parent';
}

#child {
  color: #000;
  padding: 5px;
  height: 50px;
  background: lightgreen;
}

#child:before {
  content: 'Child';
}

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