Question

我正在开发一个更复杂的将道具从组件传递到另一个组件的示例。在这种情况下，它是数组的内容（当我点击该内容时）到<div>。

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

（请查看上面链接中的代码）

TextBox <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>以接收新信息，通过替换＆＃34;选择一个节点来查看其数据结构......＆＃34;当我单击属于文件树的其中一个元素时。

我也了解如何准备文件树以传递内容<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传递给＆lt; TextBox /＆gt;。查看index.js的第126行。

然后，在text_box.js中使用componentWillReceiveProps（）来设置具有内容prop的TextBox状态。 text_box.js的第18行。

React - 将道具从Array传递到Div

1 个答案: