Reactjs用父子组件编码

Question

我有3个组件，即2个子组件和一个父组件。我想将子组件值传递给父组件（只有值不是组件，它应该在父组件中不可见），并且这个值从父组件传递到另一个子组件。

关于如何继续这样做的任何建议或逻辑，因为我现在没有任何指导，我不得不在这里问。上述问题是否可行。

代码非常复杂，所以我没有放在这里。谢谢

Answer 1

当你说价值观时，你的意思是状态，道具，用户输入，还有什么？

如果您指的是状态或道具：React具有单向数据流，因此实现此目的的最简单方法是将数据实际存储在更高级别。将子项使用的数据存储在父项中并将其传递给子项以供使用，或者使用父级和子级都可以访问的存储。无论哪种方式，这将使所有组件更容易访问数据。

如果你的意思是用户输入：你可以实现这一目的的一种方法是将一个回调从父组件传递给子组件作为prop，然后在子组件中调用当用户执行某些操作或更改某些值时的回调。回调函数可以使父进程可以访问该用户操作，然后您可以决定如何处理来自该用户的数据。

Answer 2

Akshradl，

Child to Parent - 使用回调和状态

父母对孩子 - 使用道具

这里还有另一篇文章解释它：https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

Answer 3

这是解决方案。在parrent组件中你有一个州。并有一个setData方法来更新状态。将setData传递给ChildOne使用道具。和data到ChilTwo并使用它

class StoreBanner extends React.Component {
  constructor() {
    this.state = {
      data: 'whatever'
    }
  }

  setData = (data) => {
    this.setState({data})
  }

  render() {
    return (
      <div>
        <ChildOne setData={this.setData}/>
        <ChildTwo data={this.state.data}/>
      </div>
    )
  }
}

在ChildOne中，您可以更新父状态

class ChildOne extends React.Component {
  setParentData = () => {
    this.props.setData('another')
  }
  ...
}

Answer 4

你可以这样做。

class ParentComp extends React.Component {
    constructor() {
        super();

        this.state = {
            theStateToPass: null
        }
        this.receiveDataFromChild = this.receiveDataFromChild.bind(this);
    }

    receiveDataFromChild(data) {
        this.setState({
            theStateToPass: data
        })
    }
    render() {
        return (
            <div>
                <FirstChild updateMe={this.receiveDataFromChild} />
                <SecondChild stateFromFirstChild={this.state.theStateToPass} />
            </div>
        )
    }
}

class FirstChild extends React.Component {
    constructor(props) {
        super(props);

        this.callParentMethod = this.callParentMethod.bind(this);
    }

    callParentMethod(e) {
        let someDataToSend = "ABC";
        this.props.updateMe(someDataToSend)
    }
    render() {
        return (
            <div onClick={this.callParentMethod}>

            </div>
        )
    }
}

class SecondChild extends React.Component {
    render() {
        return (
            <div>
                {this.props.stateFromFirstChild}
            </div>
        )
    }
}

然而它变得复杂并且可能导致一个人拔头发。所以我建议使用redux，它保持流程简单，你有一个reducer，动作和一个容器。一切都与流程相关并保持清洁，但它会带来更多代码的额外开销，因为您将创建容器缩减器和操作。