如何从‘`Outlet`’到页面的通信

Question

我的Layout.tsx：

import { FC, useState } from 'react';
import * as React from 'react';
import { Outlet } from 'react-router-dom';

export const Layout: FC = () => {
  const [name, setName] = useState('Mohamed');
  const updateName = (value) => {
    setName(value);
  };
  return (
    <div>
      <header>Header</header>
      <main>
        <Outlet props={name} fun={updateName} />
      </main>
      <footer>footer</footer>
    </div>
  );
};

我的注册页面：

import { FC, useState } from 'react';
import * as React from 'react';

export const Register: FC = ({
  name,
  fun,
}: {
  name: string;
  fun: (string) => void;
}) => {
  const [option, setOption] = useState<string>();
  React.useEffect(() => {
    console.log(name); //undefined
    setOption(name);
  }, [name]);

  const updateName = () => {
    fun('new name');
  };
  return (
    <div>
      <h1>{option}</h1>
      <button onClick={() => updateName()}>Click Me </button>
    </div>
  );
};

在我的注册页面中，当我试图通过调用获得一个错误的undefined从updateName更新名称时，名称安慰为inc。有人告诉我正确的路吗？

现场演示

index.tsx：

import * as React from 'react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Register } from './register/Register';
import { Layout } from './layout/Layout';
import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="/" element={<App />} />
          <Route path="register" element={<Register />} />
        </Route>
      </Routes>
    </BrowserRouter>
  </StrictMode>
);

Answer 1

以下是答案：

Layout.tsx：

import { FC, useState } from 'react';
import * as React from 'react';
import { Outlet } from 'react-router-dom';

export const Layout: FC = () => {
  const [name, setName] = useState('Mohamed');
  const updateName = (value) => {
    setName('new name');
  };
  return (
    <div>
      <header>Header</header>
      <main>
        <Outlet context={[name, updateName]} />
      </main>
      <footer>footer</footer>
    </div>
  );
};

Register.tsx：

import { FC, useState } from 'react';
import * as React from 'react';
import { useOutletContext } from 'react-router-dom';

export const Register: FC = () => {
  const [name, updateName] = useOutletContext();
  return (
    <div>
      <h1>Register page {name}</h1>
      <button onClick={() => updateName()}>Click Me </button>
    </div>
  );
};

现在数据可以从一个出口分解到另一个页面，页面可以更新出口道具以及调用该函数。