在其他React组件上传递道具

Question

I would like passing props to React Component (no parently and no descently).

Example :

<aside>
  <Navigation />
</aside>
<main>
  <Video />
</main>

onClick on <a> element on my Navigation , i want to update my Video component state (src).

I know i can change state for Child component, but for this case .. :/

Anyone can help me ?

Thank you community !

Answer 1

Pass a click handler to Navigation which calls setState on the parent component (containing both the Navigation and the Video). The thing you want to change should be a prop on Video. The setState will cause the Video to be rerendered with the new prop.

Answer 2

You can set state like this

1 create a function to set states in your parent component.

2 pas it like a prop to <Navigation />

3 use this prop onclick in your <Navigation />

Answer 3

One way to do it is to use redux together with react. While redux is quite large step to learn, once you master it itnwill help you solve problems like this easily.

To give you very rough idea how would things work in react with redux combination, here is very simplified workflow.

• All components get data for display from state stored in redux store.
• Navigation component would dispatch actions to the redux store when something is clicked in them or changed somehow.
• Reducers in redux store will recognize those actions and make changes to the state in the redux store
• Once changes are done, all components gets rendered afresh using new data from redux store