javascript - React - 将属性从 Array 传递到 Div

Question

我正在开发一个更复杂的示例，将 Prop 从一个组件传递到另一个组件。在本例中，它是数组的内容(当我单击该内容时)到 <div> .

您可以在此处找到代码: https://codesandbox.io/s/509j5npkwx

(请检查上面链接中的代码)

文本框 <div> 组件:

export class TextBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: "Select A Node To See Its Data Structure Here..."
    };
    this.changeContent = this.changeContent.bind(this);
  }

  changeContent(newContent) {
    this.setState({
      content: newContent
    });
  }

  render() {
    return (
      <div className="padd_top">
        <div className="content_box">{this.state.content}</div>
      </div>
    );
  }
}

export default TextBox;

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
        )
      }
      <TextBox />
      </div>
    )
  }
}

我正在尝试做这样的事情，以进一步理解: http://alexcurtis.github.io/react-treebeard/

我了解了如何准备<div>当我单击属于文件树的元素之一时，通过替换“选择一个节点以在此处查看其数据结构...”来接收新信息。

我还了解了如何准备文件树来传递内容<div> ，但在这种情况下，我很困惑应该在哪里以及如何应用到正确的组件。

我是 React JS 新手。如果您对这个问题有任何建议，我将非常感激。

谢谢。

<小时/>

我稍微改变了项目的结构，现在我期待着 <TextBox>和<FileTree>并排。

更具体地说，像这样:

export class App extends React.Component {
render() {
    return (
    <div>
        <div className="col-md-12">
            <SearchEngine />
        </div>
        <div className="col-md-6">
            <FileTree />
        </div>
        <div className="col-md-6">
            <TextBox content={this.props.activeNode} />
        </div>
    </div>
    );
}
}

我以为通过 props 不会有什么不同至<App> ，但我可能会再次错过一些东西，因为它没有正确通过。这里缺少什么？

再次感谢。

Answer 1

我不确定我是否理解你的问题。

这是我的 fork :https://codesandbox.io/s/50pv75q8ll

基本上，您将 activeNode 传递给 。查看index.js 的第126 行。

然后，在 text_box.js 中使用 componentWillReceiveProps() 通过 content 属性设置 TextBox 状态。 text_box.js 第 18 行。