如何在 React 中更新父级的状态？

javascript reactjs web-deployment

2022-08-29 23:05:12

我的结构如下所示：

Component 1

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5

Component 3

组件 3 应根据组件 5 的状态显示一些数据。

由于 props 是不可变的，我不能简单地将其状态保存在组件 1 中并转发它，对吗？是的，我已经读过关于Redux的文章，但我不想使用它。我希望有可能通过react来解决它。我错了吗？

答案 1

对于子父通信，您应该将设置状态的函数从父级传递到子级，如下所示


class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      someVar: 'some value'
    })
  }

  render() {
    return <Child handler = {this.handler} />
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.handler}/ >
  }
}

这样，子级就可以通过调用使用 props 传递的函数来更新父级的状态。

但是你将不得不重新考虑组件的结构，因为据我所知，组件5和3并不相关。

一种可能的解决方案是将它们包装在更高级别的组件中，该组件将同时包含组件1和3的状态。此组件将通过 props 设置较低级别的状态。

答案 2

这就是如何使用新钩子做到这一点。useState

方法 - 将状态更改器函数作为 prop 传递给子组件，并对该函数执行任何操作：

import React, {useState} from 'react';

const ParentComponent = () => {
  const[state, setState]=useState('');
  
  return(
    <ChildComponent stateChanger={setState} />
  )
}


const ChildComponent = ({stateChanger, ...rest}) => {
  return(
    <button onClick={() => stateChanger('New data')}></button>
  )
}