React 无法将 props 传递给父组件答案

【问题标题】：React cannot pass props to parent componentReact 无法将 props 传递给父组件
【发布时间】：2022-01-01 19:44:29
【问题描述】：

目标：将数据从注册组合提供给应用组合，然后从应用组合提供给聊天组合注册 --> 应用程序 --> 聊天附加信息：Register 使用用户名，然后将其传递给 Chat comp 以呈现为用户名

或者我应该只是将值传递给 url 参数然后获取它？我查找的答案是建议创建 redux 或来自类组件

import Chat from "./components/chat";
import Register from "./components/register";
import { BrowserRouter, Route, Routes } from "react-router-dom";
function App(props) {
  console.log(props);
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Register />}>
          <Route
            path="chat"
            element={(props) => <Chat {...props} data={true} />}
          />
        </Route>
        <Route
          path="*"
          element={
            <main style={{ padding: "1rem" }}>
              <p>404 :)</p>
            </main>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

注册组件：

import { useState } from "react";
import { useNavigate } from "react-router-dom";
export default function Register() {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const generatedName = `user#${Math.floor(Math.random() * 1000000 + 1)}`;
  const handleSubmit = () => {
    if (name === "") {
      setName(generatedName);
    }

    navigate("/chat", { replace: true });
    HERE I WANT TO RETURN THE DATA TO PARENT//return "hello parent";
  };
  return (
    <div>
      Enter username:{" "}
      <input
        placeholder={generatedName}
        onChange={(e) => setName(e.target.value)}
      ></input>
      <button onClick={() => handleSubmit()}>enter</button>
    </div>
  );
}

【问题讨论】：

移动你的状态和handleSubmit 给父母，然后把handleSubmit 作为道具传递给你的孩子。如果需要，也可以将状态作为道具传递给孩子。

标签： reactjs react-router-dom

【解决方案1】：

您可以使用 useState 挂钩在您的应用组件中设置数据状态，并将引用传递给 setter 函数，该函数修改您的数据并将其设置为一个值，并将它们都传递给 Register 组件。此外，根据需要将数据传递给您的聊天组件。你可以尝试如下，

在 App 组件中，

...

function App(props) {
  const [data,setData] = useState('');

  const myDataSetterFunction = (dataToBeSet) => {
     setData(dataToBeSet);
  }

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Register intialData={data} myDataSetterFunction={myDataSetterFunction}   />}>


          <Route
            path="chat"
            element={(props) => <Chat dataToBeSupplied={data} {...props} data={true} />}
          />
        </Route>
        <Route

....

Register组件可以修改数据，使用传入的setter函数来修改hook的状态。一旦数据被修改，就会触发重新渲染，这将传递数据，或者只有当数据从初始值更改为更安全时才能传递数据。

在 Register.js 内部，使用 props 调用传递的函数来设置应用程序内部的数据，执行类似的操作。

props.myDataSetterFunction( ...dataToBeReturned... );

另外，请记住在将数据传递给聊天并使用它之前确保数据具有一定的价值。

【讨论】：

10x 开发者！！

【解决方案2】：

在这里，您可以在想要切换到新组件时使用 queryParams：

navigate({
  pathname: '/chat',
  search: '?message=hello parent',
});

在 React 中，我们不能直接将 props 从孩子传递给父母。您可以将一个函数作为 prop 从父组件传递给子组件，然后在子组件中调用该函数。

【讨论】：

【解决方案3】：

如果 Register comp 采用输入名称，则呈现 Chat comp。不确定我是否需要这个 react-router-dom 的东西

function Register() {
  const navigate = useNavigate();
  const [passedUsername, setForPassedUsername] = useState(false);
  const [name, setName] = useState("");
  const generatedName = `user#${Math.floor(Math.random() * 1000000 + 1)}`;
  const handleSubmit = () => {
    if (name === "") {
      setName(generatedName);
    }
    setForPassedUsername(true);
    navigate("/chat", { replace: true });
    return "hello parent";
  };
  return (
    <div>
      {passedUsername ? (
        <Chat data={name}></Chat>
      ) : (
        <div>
          Enter username:{" "}
          <input
            placeholder={generatedName}
            onChange={(e) => setName(e.target.value)}
          ></input>
          <button onClick={() => handleSubmit()}>enter</button>
        </div>
      )}
    </div>
  );
}

【讨论】：