javascript - How to transfer state between React components with hooks? - Stack Overflow

admin管理员组

文章数量:1415467

With React classes when you have state in the constructor you could inherit it to the child ponent directly and from the child to the parent using callbacks. How can you transfer state from parent to child with hooks? Is the only way useReducer or Redux?

With React classes when you have state in the constructor you could inherit it to the child ponent directly and from the child to the parent using callbacks. How can you transfer state from parent to child with hooks? Is the only way useReducer or Redux?

• javascript
• reactjs
• redux
• react-hooks

Share Improve this question Follow asked May 18, 2020 at 8:13 Fotios TragopoulosFotios Tragopoulos 47811 gold badge77 silver badges3030 bronze badges 1

• 2 Props work the same regardless of functional ponent vs class-based ponent. State values and callbacks passed as props. – Drew Reese Commented May 18, 2020 at 8:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The concepts of passing props down to child or conveying information from child to parent hasn't changed with the arrival of hooks.

Hooks provide, you a way to use lifecycle like functionality and states with functional ponents.

you can declare your state in parent with useState and pass it down as props to child ponent as you would normally have done with class ponents or functional ponents previously

For example:

const Parent =() => {
  const [count, setCount] = useState(0);
  return <Child count={count} setCount={setCount} />
}

const Child = ({count, setCount}) => {
  const updateCount = () => {
     setCount(prev=> prev + 1);
  }
  return (
      <div>
         <div>Count: {count}</div>
         <button type="button" onClick={updateCount}>Increment</button>
      </div>
}

You can refer this post for more details on lifecycles with hooks:

ReactJS lifecycle method inside a function Component

Please refer the react docs with hooks FAQs

Classes and functional ponents (or func-p as my mate calls them) are the same in respect to props.

You can pass props from parent to child in a functional ponent just like how you'd do with a class.

//Parent

const Parent = () => {

const [state, setState] = React.useState({ products: 1, isAvailable: true})

const addProduct = (data) => {
// Your function
}

return (
<Child product info={state} addProduct={addProduct} />

)

}


export default Parent

And in the child ponent you can receive the props typically the way you would will classes.

const Child = ({productInfo, addProduct}) => {
 // Do what ever you like with the props
}

Cheers!

Perhaps, you should ask yourself why you would like to use inheritance. It seems like for many cases where many developers tend to immediately think about using OOP-style inheritance, React.js might remend position instead (see https://reactjs/docs/position-vs-inheritance.html).

With functional ponents, position is probably the only choice, which means that your "parent" ponent would render the "child" ponent, passing whatever state it needs to pass via the child's props.

Whether your project needs Redux or not should be pletely orthogonal to the position-vs-inheritance question.

本文标签： javascriptHow to transfer state between React components with hooksStack Overflow