Question

我正在使用React Redux应用程序，我对某些最佳实践有一个非常基本的问题。

我有MainComponent（容器类型），我在componentDidMount上获取数据：

class MainComponent extends React.Component {
  componentDidMount(){
    this.fetchData()
  }
  fetchData() {
    this.props.fetchDataAction()
  }
  render() {
    return (
      <div>
        <ChildComponent1 />
        <ChildComponent2 />
      </div>
    )
  }
}
export default connect(mapStateToProps,{fetchDataAction})(MainComponent)

如何将获取的数据传递给ChildComponents？什么是最佳做法？两种可能的解决方案是（恕我直言 - 可能更多？）

第一个解决方案：

class MainComponent extends React.Component {
...
render() {
  return (
    <div>
      <ChildComponent1 dataOne={this.props.data.one} />
      <ChildComponent2 dataTwo={this.props.data.two} />
    </div>
  )
}
...

第二个解决方案 - 将ChildComponents连接到存储，该存储由MainComponent中的fetchDataAction（）更新：

class ChildComponent1 extends React.Component {
  render() {
    return (
      <div>
        {this.props.one}
      </div>
    )
  }
}
function mapStateToProps(state){
  return (
    one: state.one
  )
}
export default connect(mapStateToProps,null)(ChildComponent1)

现在我使用第一个解决方案，当ChildComponents不会触发更新存储和第二个解决方案的操作时。但我不确定这是否是正确的方法。

Answer 1

如果您有多个子组件，则必须将获取的数据的一部分传递给不同的子组件;我建议将父组件保留为单一来源。

您可以尝试以下方式： -

class MainComponent extends React.Component {

  constructor(){
     super()
     this.state = {
       data  : {}
     }
  }

  componentDidMount(){
    this.fetchData()
  }
  fetchData() {
    this.props.fetchDataAction()
  }

  componentWillReceiveProps(nextProps){
    //once your data is fetched your nextProps would be updated
     if(nextProps.data != this.props.data && nextProps.data.length>0){
        //sets your state with you data--> render is called again
        this.setState({data:nextProps.data}) 
  }
  render() {
    //return null if not data
    if(this.state.data.length === 0){
         return null
    }
    return (
      // it should have keys as one and two in api response
      <div>
        <ChildComponent1 data={data.one}/>
        <ChildComponent2 data={data.two}/>
      </div>
    )
  }
}

function mapStateToProps(state){
  return (
    data: state
  )
}
export default connect(mapStateToProps,{fetchDataAction})(MainComponent)

我觉得所有的逻辑都停留在一个地方。假设您计划在将来添加以添加更多子组件，您只需要在API上添加一行代码并进行少量更改。但是，如果您在每个组件中读取，则已将该组件再次连接存储，这使其更加复杂。

因此，除了获取data之外，如果您的子组件中没有任何其他逻辑，我会将此逻辑保留在父组件中。

React Redux - 通过props或connect将数据传递给组件

1 个答案: