Question

我在尝试让 useState 变量工作时遇到问题。我在祖父母中创建状态，然后将其传递给我的父母。这是我的代码的简化版本：

export function Grandparent(){

return(
    <div>
         const [selectedID, setSelectedID] = useState("0")
         <Parent setSelectedID2={setSelectedID} .../>  //(elipses just mean that I'm passing other params too)
    <div />
)}

家长：

const Parent = ({setSelectedID2 ...}) => {

   return(
      <div>
          {setSelectedID2("5")}  //works
          <Child setSelectedID3={setSelectedID2} />
      </div>
   )
}

从父级我可以像函数一样使用'setSelectedID2'并且可以改变状态。但是，当我尝试在下面的子组件中使用它时，我收到一条错误消息，指出“setSelectedID3”不是函数。我对反应还很陌生，所以我不确定我是否完全错过了一些东西。当它们以相同的方式传递时，为什么我可以在父级而不是子级中使用 'set' 函数？

孩子：

const Child = ({setSelectedID3 ...}) => {
    
    return(
        <div >
            {setSelectedID3("10")} //results in error
        </div>
    );
};

Answer 1

在 React 中，您在组件/函数中进行计算（它是 js 部分），然后您从它们返回的是 JSX（它是 html 部分）。

export function Grandparent(){

const [selectedID, setSelectedID] = useState("0");

return(
    <div>
         <Parent setSelectedID2={setSelectedID} .../>  //(elipses just mean that I'm passing other params too)
    <div />
)}

你也可以在 JSX 中使用（但不能定义！）一些 js 变量，只要它们可以被 JSX“渲染”（它们不是对象 - 寻找 React 控制台警告）。

那是你的 React.101 :)

Answer 2

这是一个工作示例，其中包含您在此处列出的所有内容。传递道具并在每个道具中调用该函数。

你不需要将你的 props 命名为 1,2,3..，它们的作用域是函数，所以如果它们相同就可以了。

我将 useState 和函数调用移到 return 语句上方，因为这是该逻辑应该在组件中的位置。 jsx 仅用于处理显示/输出的逻辑。

https://codesandbox.io/s/stupefied-tree-uiqw5?file=/src/App.js

此外，我创建了一个带有 onClick 的工作示例，因为这就是您要做的。

https://codesandbox.io/s/compassionate-violet-dt897?file=/src/App.js

import React, { useState } from "react";

export default function App() {
  return <Grandparent />;
}

const Grandparent = () => {
  const [selectedID, setSelectedID] = useState("0");
  return (
    <div>
      {selectedID}
      <Parent setSelectedID={setSelectedID} selectedID={selectedID} />
    </div>
  );
};

const Parent = ({ selectedID, setSelectedID }) => {
  setSelectedID("5");
  return (
    <div>
      {selectedID}
      <Child setSelectedID={setSelectedID} selectedID={selectedID} />
    </div>
  );
};

const Child = ({ selectedID, setSelectedID }) => {
  setSelectedID("10");
  return <div>{selectedID}</div>;
};

输出

10
10
10

Answer 3

const [selectedID, setSelectedID] = useState("0")

应该是外返回

无法将 useState() 'set' 函数传递给孙子

3 个答案: