React - 通过功能组件传递 props up 组件树

Question

我想在我的组件树中将一个简单的字符串、数字或布尔值向上传递多个级别。根据我阅读的内容，我需要使用回调函数来执行此操作，但我似乎无法正确理解逻辑。

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

我意识到有更好的方法来做这样的事情（redux、上下文、不同的结构等），对我来说，这里的重点是学习和理解如何使用回调函数以及如何传递一个多于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

维护一个局部状态变量来存储位置，并通过props传递一个回调函数来设置它。

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 函数将新位置作为参数并修改状态。每次状态改变时，都会再次调用渲染函数。这将使用更新的状态信息刷新视图，在您的情况下 - currentLocation。

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

  return (
    ...
  );
}

Answer 2

最好的方法是这样做，因为我认为将状态保存在 redux 存储中。您可以在 redux 中使用 subscribe() 方法创建一个侦听器，以侦听来自父组件的子组件的任何调度。

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