reactjs 如何在React中呈现下一个组件？

mccptt67 于 2022-12-03 发布在 React

关注(0)|答案(2)|浏览(135)

我有三个组件First、Second和Third，它们需要依次渲染。
我的应用程序目前如下所示：

function App() {
  return (
    <First/>
  )
}

因此，理想情况下，First中有一个表单，在提交时（可能是onSubmit）触发呈现Second组件，实际上在DOM中被替换。Second在一些逻辑之后触发呈现Third组件，并向其传递一个值。我不知道如何继续下去。
我尝试使用useState钩子来设置一个布尔状态来渲染前两个组件中的一个，但是我需要渲染First，然后以某种方式从它内部更改父组件中的设置状态，然后检查布尔值并渲染第二个组件。不知道如何做到这一点。类似下面的内容？

function App() {
  const { isReady, setIsReady } = useState(false);
  return (
    isReady
    ? <First/> //inside this I need the state to change on form submit and propagate back up to the parent which checks the state value and renders the second? 
    : <Second/>
  );
}

我很肯定这不是正确的方法。还需要弄清楚如何在呈现组件时将值传递给另一个组件，并在DOM中被替换。那么，如何在每个组件内部交互时一个接一个地呈现多个组件呢？例如，单击按钮？
非常感谢对此的一些指导。

reactjs

来源：https://stackoverflow.com/questions/74633795/how-to-render-the-next-component-in-react

2条答案

按热度按时间

tcbh2hod1#

然后以某种方式从它内部更改父对象中的set状态，然后父对象检查布尔值并呈现第二个布尔值。
你的思路其实是对的。
在React中，当您谈论UI更改时，您必须管理一些状态。
所以我们把这部分去掉了。
现在，在这种情况下，我们可以在父组件中管理上述状态，并将函数作为道具传递给子组件，以便允许它们控制相关的UI更改。

范例：

function App() {
  const { state, setState } = useState({
    isFirstVisible: true,
    isSecondVisible: false,
    isThirdVisible: false,
  });

  const onToggleSecondComponent = (status) => {
    setState(prevState => ({
      ...prevState,
      isSecondVisible: status
    }))
  }

  const onToggleThirdComponent = (status) => {
    setState(prevState => ({
      ...prevState,
      isThirdVisible: status
    }))
  }

  return (
    {state.isFirstVisible && <First onToggleSecondComponent={onToggleSecondComponent} /> }
    {state.isSecondVisible && <Second onToggleThirdComponent={onToggleThirdComponent} /> }
    {state.isThirdVisible && <Third/> }
  );
}

然后您可以在子组件中使用这些道具。示例用法：

function First({ onToggleSecondComponent }) {

  return (
    <form onSubmit={onToggleSecondComponent}
      ...
    </form
  )
}

请注意，还有其他方法可以传递这些参数。
例如，您可以在父组件中使用一个函数来处理所有组件，也可以将setState传递给子组件，让它们执行逻辑。
无论哪种方式，这都是实现你想要的结果的可靠方法。

赞(0）回复(0）举报 2022-12-03

qvtsj1bj2#

正如您所说的，存在阶段，而不是每个阶段都有一个状态，只有当前阶段的状态，然后您可以增加阶段状态以进入下一个表单。
下面是一个简单的例子，我也使用了一个useRef来处理父/子状态，基本上只是将状态传递给子，子可以更新状态。在最后的提交中，我只是JSON。将状态字符串化以进行调试。
第一个

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 如何在React中呈现下一个组件？

2条答案

相关问题

热门标签

最新问答