如何正確地將回調和 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;