Question

最近我学会了如何将道具从一个组件传递到另一个组件。就我而言，从<FileTree>到<TextBox>，您可以在此处看到： https://codesandbox.io/s/y018010qk9

但之后，我重新组织了一些代码，现在可以在<App> (App.js)内看到我的React App的结构。我决定将<FileTree>和<TextBox>并排放在Bootstrap上。

所以，从逻辑上讲，我认为将props从<App>传递到<TextBox>将与之前相同：从<FileTree>到<TextBox>。不幸的是，事实并非如此。

目前，这是<App>内的代码：

// Structure of the project
export class App extends React.Component {
constructor(props) {
    super(props);
}

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>
    );
}
}

这里是<TextBox>内的代码：

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

showContent (newContent) {
    this.setState ({
        content: newContent
    })
}

componentWillReceiveProps (nextProps) {
    this.setState ({
        content: nextProps.content
    })
}

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

export default TextBox;

以防万一，在这里可以找到<FileTree> component：

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

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

谢谢。

Answer 1

您需要使用提升状态方法将状态从子级传递到父级，然后从父级传递给您想要的子级

在父组件中创建一个带状态的构造函数，然后创建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>

然后在 file_tree.js FileTree函数中，您需要调用我们在父组件中创建它的liftStateUp函数

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

https://reactjs.org/docs/lifting-state-up.html

Answer 2

道具从父组件传递到子组件。您需要使用全局存储，以便可以在组件的不同兄弟中与状态进行交互。为此，您可以使用redux。

如果您的应用程序尺寸较小，那么您也可以尝试使用context api。

希望，这对你有帮助。

React - 将道具传递给App.js

2 个答案: