javascript - 如何同时设置两个组件并共享设置状态？

Question

我有两个组件，一个是简单搜索，另一个是高级搜索。我在简单搜索组件中有一个状态 isSet ，我希望该属性与高级搜索共享。这样，当我单击高级搜索按钮时，它将在滚动时与我的简单搜索组件固定在一起。 isSet 在简单搜索中运行良好，我希望它与其他组件一样工作。

Answer 1

如果您需要共享状态，您可能需要创建一个父组件，在其中定义状态 isPinned 并将其传递给两个组件。此外，如果您需要修改组件的状态，您可以传递一个方法来更新它:

const ParentComp = () => {
    const [ isPinned, setIsPinned ] = useState(false);
    return (
        <div>
            <ComponentOne isPinned={isPinned} setIsPinned={setIsPinned} />
            <ComponentTwo isPinned={isPinned} setIsPinned={setIsPinned} />

        </div>
    )
}

在这两个组件中的任何一个中，您都可以像这样使用它们:

const ComponentOne = ({ isPinned, setIsPinned }) => (
    <Button onClick={() => setIsPinned(!isPinned)} />
)