Question

我想在我的组件树中传递多个级别的简单字符串，数字或布尔值。从我的阅读中，我需要使用回调函数来完成此操作，但是我似乎无法理解正确的逻辑。

这是我将一个道具从“父应用”传递到孙子“面包屑”的示例。我希望这个道具实际上来自树中的最后一个孩子，即“ ResultsPage”组件。

我意识到有更好的方法可以做到这一点（redux，上下文，不同的结构等），对我来说，这里的重点是学习和理解如何使用回调函数以及如何将一个prop传递给其他人。 1级。

请新手友好-感谢您的输入：）

class App extends React.Component {
  render() {
    return (
      <>
        <h1>Top level app</h1>

        {/* I import the header and pass down prop */}
        <Header currentLocation="Results Page" />

        {/* I import the main app content */}
        <ResultsPage />
      </>
    );
  }
}

function Header(props) {
  return (
    <>
      <h2>
        This is the header element. It will have some nav items and the
        breadcrumb I import
      </h2>

      {/* I import the breadcrumb accept the props from parent and pass the props down to child */}
      <Crumbs currentLocation={props.currentLocation} />
    </>
  );
}

function Crumbs(props) {
  return (
    <>
      {/* I display the props I passed down through the tree */}
      <h3>
        <small>This is the breadcrumb, you are on</small>{" "}
        {props.currentLocation}
      </h3>
    </>
  );
}

function ResultsPage() {
  return (
    <>
      <p>
        This is the actual results content. I would like this component to tell
        the header component that I have loaded so it can update the breadcrumb
        to let it know which page is currently loaded in the app.
      </p>
    </>
  );
}

export default App;

为解决此问题，我提出了以下解决方案：

Codesandbox: Solution to the initial question

Codesandbox: Additional solution for the same problem using only functional components

希望对下一个家伙有帮助：）

Answer 1

维护局部状态变量以存储位置，并通过道具传递回调函数进行设置。

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      currentLocation : "InitialLocation"
    }
  }

  changeCurrentLocation = (newLocation) => {
    this.setState({currentLocation : newLocation})
  }

  render() {
    ...
    <ResultsPage callback={this.changeCurrentLocation}/>
  }
}

changeCurrentLocation函数将新位置用作参数并修改状态。每次状态更改时，都会再次调用render函数。在您的情况下，这将使用更新的状态信息-currentLocation刷新视图。

function ResultsPage({ callback }) {
  useEffect(() => {
    callback('My Results');
  }, [callback])

  return (
    ...
  );
}

Answer 2

最好的方法是执行此操作，因为我认为将状态保留在redux存储区中。您可以在Redux中使用subscribe()方法创建一个侦听器，以侦听来自父组件的子组件的所有调度。

还有一些简单的方法，您可以使用localstorage。您可以存储子组件中的值，并使用window.addEventListener('storage', function(e) { }回调方法由父组件侦听。我希望你能理解我想说的话。

React-通过功能组件将组件树传递给道具

2 个答案: