Я экспериментировал с новой функцией Hook в React. Учитывая, что у меня есть следующие два компонента (с использованием React Hooks) -
const HookComponent = () => {
const [username, setUsername] = useState('Abrar');
const [count, setState] = useState();
const handleChange = (e) => {
setUsername(e.target.value);
}
return (
<div>
<input name="userName" value={username} onChange={handleChange}/>
<p>{username}</p>
<p>From HookComponent: {count}</p>
</div>
)
}
const HookComponent2 = () => {
const [count, setCount] = useState(999);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Крюки утверждают, что решают проблему разделения логики состояния между компонентами, но я обнаружил, что состояния между HookComponent
и HookComponent2
не являются доступными. Например, изменение count
в HookComponent2
не приводит к изменению HookComponent
.
Можно ли делиться состояниями между компонентами с помощью useState()
hook?