React Ts，从子访问父状态

Question

所以我一直在尝试从子组件访问父状态，但是我一直收到错误消息或者它不能一起工作。我在网上找到了多种解决方案，但是 none 它们适用于 React with 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// 这不是我正在处理的代码！我只是快速地写了它，以便更容易看到我要做什么！

Answer 1

您可以使用称为 props 的东西将状态从 parent 传递到 child。这些 props 可以是变量，也可以是函数。当然，因为它是打字稿，所以你需要定义它。道具的类型可以用接口定义：

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;
}

接口在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>;
    }
}

您还需要稍微更改 parent 组件。看起来像这样：

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

希望本文对您有所帮助，并能解决您的问题。如果没有，请告诉我，以便我们继续寻找解决方案。 :)

React Ts，从子访问父状态

React Ts, Access Parents state from Child

react-tsx