Как я могу закрепить два компонента одновременно с разделением закрепленного состояния?

Question

У меня двухкомпонентный, один простой для поиска, а другой - расширенный поиск У меня есть состояние isPinned в компоненте простого поиска, и я хочу, чтобы это свойство было доступно для расширенного поиска. Так что, когда я нажимаю кнопку расширенного поиска, она будет прикреплена к моему простому компоненту поиска во время прокрутки. isPinned хорошо работает в простом поиске, и я хочу, чтобы он работал так же с другим компонентом.

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)} />
)

Answer 2

Вы можете разрешить его следующим образом: - 1: - создать компонент класса с именем SwitchSearchComponent и использовать его в вашем существующем компоненте, где вы вызываете поисковые компоненты 2: - установить состояние в этом существующем компоненте showSearchComponent. 3: - Передать это состояние в качестве реквизита SwitchSearchComponent. 3: - вызвать оба компонента в нем условно со значением пропуска showSearchComponent. 4: - вы можете установить значение showSearchComponent просто для простого поиска и продвижения для предварительного поиска.