Как отобразить компонент B только после выбора переключателя в компоненте A в реаги js?

Question

Я новичок в React. У меня есть три компонента A, B и C. Мне нужно визуализировать C только после выбора переключателя, который указан в A. Я не нахожу способ сделать это. Может кто-нибудь предложить лучший подход для этого

Answer 1

Идея в основном заключается в том, что что-то "выше" и A, и C должны хранить переменную, чтобы сказать, видима ли C, и затем передавать ее до C. То, что находится выше, может быть состоянием их родителя, или хранилищем mobx, или переменной, установленной на крючке ... все, к чему могут получить доступ как A, так и C, и это вызовет повторный рендеринг в C, когда его значение изменилось.

В старые времена мы делали что-то вроде:

class ParentComponent extends React {
    state = { showC: false }
    toggleShowC = () => this.setState({ showC: !this.state.showC })
    render () {
        <>
            <A toggleShowC={this.toggleShowC} />
            <B />
            <C showC={this.state.showC} />
        </>
    }
}

const C = props => (
    props.showC
        ? <The goodies go here />
        : null
)

Это не очень сложный пример. Я призываю вас попытаться воссоздать что-то подобное, используя реагирует на хуки .