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

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的值在父亲的组件中也发生变化？

Answer 1

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

例如：

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

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

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

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

set state of variable inside an inner component

state

reactjs