在 Modern React 中将数据向上传递到组件层次结构

Question

In a react component hierarchy one can pass data from the root component to some component inside component tree by passing props . But what is the optimum way of passing data up the hierarchy? I can think of passing methods from the wrapper to the child. Is there any better way of handling data flow in a deep nested components scenario?

Answer 1

I don't think there is something wrong with passing callback functions from parent to child component.

But, in this case:

<parent onSomeEvent={..}>
  <first-child onSomeEvent={..}>
    <second-child onSomeEvent={..}>

...

When need to pass some data from child component to higher level parent, and you don't want to pass the callback function like above example you may use state management like react-redux , MobX . You can also use react context api and hooks if you don't want to use additional library.

You just have to keep in mind it isn't overkill for your app.