javascript - ReactJS - Passing props (state) to children of children - Stack Overflow

admin管理员组

文章数量:1302374

I have a quick question. How to pass state to children of children?

If the parent has some kind of state, what is the best way in ES6 to pass this state not to its direct child, but to the child of the direct child.

I have attached of image of the layout.

Main app - is the main ponent that consists of Header, Sidebar, Content Area.

Sidebar consists of - Sidebar Items.

Content Area consists of - Content Items.

Main question

How can I by clicking Sidebar Item update the ponents that are in Content Area?

Please note that this layout has 6 ponents ( App, Header, Sidebar, Content Area, Sidebar Item, Content Item).

Image

I have a quick question. How to pass state to children of children?

If the parent has some kind of state, what is the best way in ES6 to pass this state not to its direct child, but to the child of the direct child.

I have attached of image of the layout.

Main app - is the main ponent that consists of Header, Sidebar, Content Area.

Sidebar consists of - Sidebar Items.

Content Area consists of - Content Items.

Main question

How can I by clicking Sidebar Item update the ponents that are in Content Area?

Please note that this layout has 6 ponents ( App, Header, Sidebar, Content Area, Sidebar Item, Content Item).

Image

• javascript
• reactjs
• layout
• state
• prop

Share Improve this question Follow asked Jan 18, 2017 at 20:29 xoomerxoomer 32122 gold badges1111 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The only React way you can do this is by passing state and props from parent directly to a child. If a grandchild needs state or props from a grandparent, the parents must keep passing it downwards until it reaches the grandchild. React is unidirectional; from parent to child only.

So in your case the grandparent (Main App) will contain some state that will pass to the children (Sidebar and Content Area). For example from a parent ponent you'd pass state to a child like so:

<Sidebar someState={this.state.someParentState} />
<ContentArea someState={this.state.someParentState} />

When state changes in Sidebar (in your example, a click) it will be reflected on the grandparent (Main App). Since this same state is shared across multiple ponents (Content Area), each ponent with this state will be updated.

Now if you're thinking, "wow wouldn't this get messy if there are multiple children, with children that have children?". The answer is, "yes, it can!" This is where a state container (Redux, Flux, MobX) es in. Here's why you'd use one:

1. Insert state directly to any children. For example, it doesn't have to e from parent to child, it can go from grandparent directly to grandchild. In Redux, you'd do this by simply using the connect and mapStateToProps function to connect parts of state to a single ponent as props.
2. State is easier to maintain and handle in larger applications. Try creating Facebook with only React by passing state down, down, down.
3. Separates state from a ponent. Since React is for "building UI interfaces" it's wise to separate state from presentation. For simple cases it's ok but as an application gets more plex it's not.

Consider the following resources for Redux (the most popular state container):

• https://egghead.io/courses/getting-started-with-redux
• http://redux.js/docs/introduction/
• https://github./reactjs/redux/tree/master/examples

If you're handling state in a more plex way, it may be worthwhile thinking about using Redux to handle state across the application.

This way, you can map the state to props using 'connect' and pass the state between ponents as required. Have a look here for a bit more information on how to implement it.

本文标签： javascriptReactJSPassing props (state) to children of childrenStack Overflow