Question

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

我开始这样做了：

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

然后在孩子的时候我需要改变父状态：

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

此实施有任何缺点吗？

Answer 1

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

＆＃13;

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')
)

＆＃13;

#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';
}

＆＃13;

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

＆＃13;

Answer 2

一个很大的缺点是，一旦应用程序开始增长，就很难找到状态更新的位置。

我可以将setState从父组件传递给子组件吗？

2 个答案: