Javascript 反应-将道具传递给App.js

最近我学会了如何将道具从一个组件传递到另一个组件。在我的例子中，从

到

，您可以在这里看到：

但是之后，我重新组织了代码，现在可以在

（App.js）

中看到React应用程序的结构。我决定将

和

并排放置，并使用引导

因此，从逻辑上讲，我认为将

道具
从
传递到
与我之前做的相同：从
传递到
。不幸的是，事实并非如此

目前，这是
中的代码：

//项目的结构
导出类应用程序扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}

这里是
中的代码：

//文本框组件
导出类文本框扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
内容：“在此处选择一个节点以查看其数据结构…”
}
this.showContent=this.showContent.bind（this）；
}
showContent（新内容）{
这是我的国家({
内容：新内容
})
}
组件将接收道具（下一步）{
这是我的国家({
内容：nextrops.content
})
}
render（）{
返回(
{this.state.content}
);
}
}
导出默认文本框；

以防万一，您可以在这里找到
组件
：

// Construction of FileTree
export class FileTree extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeNode: null
    }
    this.setActiveNode = this.setActiveNode.bind(this);
  }

  setActiveNode(name) {
    this.setState({activeNode: name})
  }

  render() {
    return(
      <div className="padd_top">{
        renderTree(
          this.props.root || root, 
          this.setActiveNode, 
          this.state.activeNode
          )
        }  
      </div>
    )
  }  
}

//文件树的构造
导出类FileTree扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
activeNode:null
}
this.setActiveNode=this.setActiveNode.bind（this）；
}
setActiveNode（名称）{
this.setState（{activeNode:name}）
}
render（）{
返回(
{
渲染树(
这个.props.root | | root，
这个.setActiveNode，
this.state.activeNode
)
}  
)
}  
}

我最近开始了解React.js，非常感谢您提供的任何建议/清晰

多谢各位
 道具从父组件传递到子组件。您需要使用全局存储，以便可以与组件的不同同级中的状态交互。为此，您可以使用

如果您的应用程序较小，那么您也可以尝试使用

希望，这对您有所帮助。
您需要使用提升状态方法将状态从子级传递到父级，然后从父级传递到所需的子级

在父组件中，创建一个具有状态的构造函数，然后创建
liftStateUp
函数，并将其传递给要从中接收数据的子组件

  constructor(props) {
    super(props)
    this.state = {
      activeNode: '',
    }
  }

  liftStateUp = (data) =>{
    this.setState({ activeNode: data})
  }

  <div>
    <div className="col-md-6">
      <FileTree liftStateUp={this.liftStateUp} />
    </div>
    <div className="col-md-6">
      <TextBox content={this.state.activeNode} />
    </div>
  </div>


你从哪里获得
this.props.activeNode的值？你能在ReactDOM.render方法中提供代码吗？@Liam，检查链接中的代码：@HarishSoni，此链接提供所有代码：你的文件树和文本框组件在哪里？请在链接中查看。有很多非常有用的例子。
// Construction of FileTree
export class FileTree extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeNode: null
    }
    this.setActiveNode = this.setActiveNode.bind(this);
  }

  setActiveNode(name) {
    this.setState({activeNode: name})
  }

  render() {
    return(
      <div className="padd_top">{
        renderTree(
          this.props.root || root, 
          this.setActiveNode, 
          this.state.activeNode
          )
        }  
      </div>
    )
  }  
}

  constructor(props) {
    super(props)
    this.state = {
      activeNode: '',
    }
  }

  liftStateUp = (data) =>{
    this.setState({ activeNode: data})
  }

  <div>
    <div className="col-md-6">
      <FileTree liftStateUp={this.liftStateUp} />
    </div>
    <div className="col-md-6">
      <TextBox content={this.state.activeNode} />
    </div>
  </div>

  setActiveNode(name) {
    this.setState({ activeNode: name });
    this.props.liftStateUp(name);
  }