从父组件调用子组件的setState可以通过以下步骤实现:
下面是一个示例代码:
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [childState, setChildState] = useState('');
const updateChildState = (newState) => {
setChildState(newState);
};
return (
<div>
<ChildComponent updateState={updateChildState} />
</div>
);
};
export default ParentComponent;
// 子组件
import React from 'react';
const ChildComponent = ({ updateState }) => {
const handleClick = () => {
updateState('New State');
};
return (
<div>
<button onClick={handleClick}>Update State</button>
</div>
);
};
export default ChildComponent;
在上面的示例中,父组件通过useState来定义子组件的状态childState,并通过updateChildState函数来更新子组件的状态。父组件将updateChildState函数作为props传递给子组件。子组件通过props接收updateState函数,并在按钮的点击事件中调用该函数来更新父组件的状态。
这样,当子组件中的按钮被点击时,父组件的childState状态会被更新为'New State'。
领取专属 10元无门槛券
手把手带您无忧上云