如何正确地将回调和 state 传递给 React Router Dom 中的 Layout 元素？

Question

如何正确地将回调和状态传递给Layout ，以便它们可以在其他地方使用？ 当我如下分享时，出现错误和白屏：

class Menu extends Component {
  constructor(props) {
    super(props);
    this.onSearchF = this.onSearchF.bind(this)
  } 
  state = {
    searchBlock: false,
  };

  onSearchF = (keyword) => {
    const filtered = this.state.data.filter((entry) =>
      Object.values(entry).some(
        (val) => typeof val === "string" && val.toLowerCase().includes(keyword.toLowerCase())
      )
    );
  };
  render() {
    return (
      <div className="content">
        <Routes>
          <Route path="/" element={<Layout searchBlock={this.state.searchBlock} onSearch={()=>this.onSearchF()}/>}>
            <Route
              index
              element={
                <Home data={this.state.data} num={this.state.data.length} />
              }
            />
          </Route>
        </Routes>
      </div>
    );
  }
}
export default Menu;

在这里，我将回调传递给之前传递给Layout的Header ：

const Layout = () => {
  return (
    <>
      <Header sblock={this.props.searchBlock} onS = {this.props.onSearch}/>  
    </>
  );
};
export default Layout;

我想在这里使用回调：

function Header() {
  return (
    <header className="header">
        <button onClick={()=>console.log(this.props.sblock)}>button</button>
    </header>
  );
}

export default Header;

Answer 1

你的Layout是一个功能组件，你试图在其中使用this.props ； 这是不正确的。 改为将props作为 arguments 的一部分获取，如下所示：

import { Outlet } from "react-router-dom";
const Layout = ({searchBlock,onSearch}) => {
  return (
    <>
      <Header sblock={searchBlock} onS={onSearch}/>  
      <Outlet/>
    </>
  );
};
export default Layout;

Answer 2

问题

• Layout组件不接受任何道具。
• Layout组件没有为嵌套路由呈现Outlet 。

解决方案

Layout似乎只存在于渲染Header组件。 我建议直接在Main组件中渲染Header 。

例子：

class Menu extends Component {
  state = {
    data: [],
    searchBlock: false,
  };

  onSearch = (keyword) => {
    const filtered = this.state.data.filter((entry) =>
      Object.values(entry).some((val) => 
        typeof val === "string"
        && val.toLowerCase().includes(keyword.toLowerCase())
      )
    );

    ... do something with filtered ...
  };

  render() {
    const { data, searchBlock } = this.state;

    return (
      <div className="content">
        <Header sblock={searchBlock} onS={this.onSearch} />
        <Routes>
          <Route
            path="/"
            element={<Home data={data} num={data.length} />}
          />
        </Routes>
      </div>
    );
  }
}

export default Menu;