reactjs - 在内部组件中设置变量的状态

Question

我有一个简单的反应组件来保存状态。该组件变得非常长，我想将它分成更小的组件。

export default function FatherComponent(props) {
const [name, setName] = useState('');

... other functionality ...

return (
<div className="main-container">
  {renderBody()}
  <SonComponent
    name={name}/>
</div>

然后我把一些处理的代码去掉name到儿子的组件里，还有一些还在父亲的组件里处理（所以我没有完全移到里面）。

在儿子的组件中，我怎样才能改变 的值name，使其值name在父亲的组件中也发生变化？

标签： reactjsstate

Answer 1

只需传递setName给子组件。但好的做法是创建一个处理程序。

例如：

const [name, setName] = useState('');

const setNameHandler = (name) => {
 setName(name);
}

/*...*/
<SonComponent
    name={name}
    setNameHandler={setNameHandler}
/>
/*...*/