基于按钮单击动态页面更改 - React

Question

为了解决我的问题，我第一次构建了一个反应应用程序并遇到了一些问题。我有一个功能反应组件正在调用并显示另外两个功能组件，由于关键支柱略有不同。这两个组件是使用bootstrap创建的注册表和登录表。我将数据从登录表单发送到API。这部分代码正在运行。我的问题是在提交后动态更改页面。我希望能够单击登录按钮并将其发送到新页面，而无需登录和注册表单。我试图将一个函数传递给这些组件，这些组件改变了调用函数的状态，并在此基础上检查父函数显示的内容。显示我的尝试的代码在这里：这是我正在改变的主要组件中的钩子。

 const [keyID, setKey] = useState(true);

[编辑]此功能在主要功能组件中调用，如<Home KeyID={keyID} keyChanger={setKey} />：

 function Home(KeyID, setKey) {
 if (KeyID) {
   return (
     <>
       <RegLogForm KeyID={1} setKey={setKey} />
       <RegLogForm KeyID={2} setKey={setKey} />
     </>
   );
 } else {
   return (
     <>
     <LoggedIn />
     </>
   )
 }
}

这是在被调用的组件中：

<Form
  onSubmit={event => {
    event.preventDefault();
    let name2 = encodeURIComponent(name);
    ChangePage(APIHitter(props.UserID, name2, password));
    props.setKey(false);
  }}
>

我也尝试将其传递给表单组件以及：

  const increment = () => {
    setKey(keyID => false);
  };

我很想表现出正确的方向。我得到的错误是props.setKey is not a function。

Answer 1

由于Home正如此呈现 -

<Home KeyID={keyID} keyChanger={setKey} />

该函数应该以这种方式接受带有命名道具的props参数 -

function Home({KeyID, keyChanger: setKey}) {

这相当于旧的语法 -

function Home(props) {
  var KeyID = props.KeyID;
  var setKey = props.keyChanger;