React - 将道具从 Array 传递到 Div

Question

我正在开发一个更复杂的示例，将 props 从一个组件传递到另一个组件。在这种情况下，它是数组的内容（当我单击该内容时）到 <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;

文件树组件：

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

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

这是我的叉子：https://codesandbox.io/s/50pv75q8ll

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

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