Question

我想知道如何在这种情况下获得我的子元素的状态

class Child extends React.Component{

    constructor(props){
        super(props)

        this.state = {
            element : "I NEED THIS STATE"
        }

    }

    render(){
        return <h1>Hello</h1>
    }
}

class Main extends React.Component{
    render(){
        return(
            <div>
                <Child />
            </div>
        )
    }
}

Answer 1

简单地让它工作，你可以按照@Andrew建议的方式去做。但是，除非你真的知道自己在做什么，否则我强烈不鼓励你这样做。

React鼓励单向数据流，以帮助您更轻松地推理代码。经验法则可以简化为 支持，事件向上 。

数据使用props从父级传递给子级（只读会阻止子级意外改变父级state）。
活动从儿童身上冒泡，告知其父母发生了什么事。（通常通过在子事件处理程序中调用父传递函数/回调props）

在react的组件系统中，父级和子级都有隔离的范围。这意味着父母应该不了解其子女（包括您的state），而儿童只能通过props阅读父母的数据。为了更改状态以触发UI刷新，this.setState()是您的朋友，通常用于事件处理程序/服务器请求回调。

建议阅读：https://facebook.github.io/react/docs/thinking-in-react.html

<子> 顺便说一句。 React的声明性组件组成基本上是功能组合。你的问题类似于“我可以在声明它的函数中得到闭包的局部变量”，显然，你可以这样做，但你必须问自己为什么要这样做来打破封装。

Answer 2

如果我理解你，你需要你在主要组件中的状态。

const ed = new EventDispatcher((name: string, street: string) => console.log(`${name}, ${street}`));
ed.triggerListeners("Sandy", 100); // Not ok: "Argument of type '100' is not assignable to parameter of type 'string'."
ed.triggerListeners("Sandy", "100"); // Ok

}

正如Felix所说，我们使用道具抛出的功能通常用于某些事件，如onClick或onChange。像class Child extends React.Component{ constructor(props){ super(props) this.state = { element : "I NEED THIS STATE" } } render(){ this.props.checkStatus(this.state.element); return <h1>Hello</h1> } } class Main extends React.Component{ getChildStatus(status){ console.log(status) } render(){ return( <div> <Child checkStatus={this.getChildStatus}/> </div> ) }

这样的东西

如何在ReactJS中获取我的子元素的状态？

2 个答案: