我怎么能有多个状态在useState钩子

Question

我只有一个状态点击按钮，但我有10个按钮组件。如何在不重复定义状态的情况下拥有多个状态

let [Clicked,setState] = useState(false)
const clicking =()=>{
setState(!Clicked)
}

这将适用于所有按钮，如果我添加clicking到我的所有组件，你能告诉我我如何添加例如Cliked1Clicked2等每个组件没有定义useState所有时间

Answer 1

你可以在父组件中包装按钮

const MyButton = () => {
const [clicked, setClicked] = useState(false)
return (<button
onClick={() => setClicked(!clicked)}
/>
}

然后按你的需要设置任意多个MyButtons:

const MyComponent () => {
return <>
<MyButton/>
<MyButton/>
<MyButton/>
</>
}

不清楚你想用这个状态做什么，所以我假设这个状态只需要是本地的。

Answer 2

使用React Render Props方法

基本上你做一个包装器组件，它接受一个函数，返回一个jsx

const CounterWrapper = ({ render }: any) => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return <>{render(count, increment, decrement)}</>;
};

然后在你的任何组件中使用都可以使用这个通用代码

<CounterWrapper
render={(count: any, increment: any, decrement: any) => {
return (
<>
Counter No.1 : {count}
<br />
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</>
);
}}
/>

代码沙箱示例