Реакция Ц, Доступ Родителей государства от Ребенка - PullRequest
Новая
       38

Реакция Ц, Доступ Родителей государства от Ребенка

0 голосов
/ 02 апреля 2020

Итак, я пытался получить доступ к состоянию родителей из дочернего компонента, однако я получаю либо сообщение об ошибке, либо оно не работает все вместе. В сети я нашел несколько решений, однако ни одно из них не работает для React с Typescript.

Итак, вот упрощенный пример кода того, что я пытаюсь сделать. 

export default class parent extends React.Component {

state= {
exist: true
}

render() {
    return (

    <div>
        <child>
    <div>
    )
}


export default class child extends React.Component {


componentDidMount = () => {
    document.getElementById("theText").value = "It does exist!"
}

render() {
    return (

    <div>
         <h1 id="theText">It Doesn't exist</h1>
    <div>
    )
}

PS / / Это НЕ код, над которым я работаю! Я просто быстро написал это, чтобы мне было проще понять, что я пытаюсь сделать!

1 Ответ

0 голосов
/ 05 апреля 2020

Вы можете передать состояние от своего родителя ребенку, используя то, что называется реквизитом. Эти реквизиты могут быть как переменными, так и функциями. Конечно, так как это машинопись, вам нужно это определить. Тип реквизита может быть определен с помощью интерфейса: 

interface ChildProps {
    Exists: boolean;

    // You can skip this one if you don't want to alter the state
    // in the parent from the child component.
    SetExists: (value: boolean) => void;
}

Интерфейс используется в качестве универсального c аргумента в React.Component<ChildProps>

export default class child extends React.Component<ChildProps> {
    componentDidMount = () => {
        document.getElementById("theText").value = "It does exist!"
    }

    render() {
        // Depending on the state of the parent, something can be rendered here.
        if(this.props.Exists)
            return <h1>Does exists! :)</h1>;
        else
            return <h1>Doesn't exist :(</h1>;
    }
}

Вам также необходимо изменить родительский компонент немного. Это будет выглядеть так: 

export default class parent extends React.Component {
    state = {
        exist: true
    }

    render() {
        return (
            <div>
                <child

                    // Here, the state is passed to a child component as if it
                    // were an argument of a function.
                    Exists={this.state.Exists}
                    SetExists={(x) => this.setState({ Exists: x })}
                >
            <div>
        )
}

Я надеюсь, что это полезно и решит вашу проблему. Если нет, дайте мне знать, чтобы мы могли продолжить поиск решения. :)

...