Question

我很久没有使用ReactJS了。我认为情况必须非常普遍，但我没有在任何例子中看到它，我想知道是否有任何最佳实践。

场景很简单就是说我在我的应用程序中有3个表单，FormA，FormB和FormC。我已将每个表单编写为单独的ReactJS组件。当用户登陆网站时，将显示FormA。根据FormA上的输入，接下来将显示FormB或FormC，完全替换页面上的FormA。

我不认为“路由”是答案，因为我不希望URL反映当前的应用程序状态，我不希望用户能够通过更改URL来更改表单。表单（组件）的切换应仅基于业务规则来完成。

我知道ReactJS不是一个框架，但这似乎是一个常见的场景，一些有用的模式可能围绕它演变。只是朝着正确的方向轻推将会非常有帮助。谢谢。

Answer 1

解决方案是创建包含<tr ng-repeat="elem in data">，Form，FormA的包装器FormB组件，并显示其中一个组件取决于其状态。像

FormC

这种授权在React中很常见。通常，您应该在const Form = React.createComponent({ getInitialState() { return { form: 'formA' /* other state */ } }, render() { return ( <div> {this.state.form === 'formA' ? <FormA onSubmit={this.saveFormData} /> : null} {this.state.form === 'formB' ? <FormB onSubmit={this.saveFormData} /> : null} {this.state.form === 'formC' ? <FormC onSubmit={this.saveFormData} /> : null} </div> ) }, saveFromData() { /* set state here */ } })和Form中管理表单逻辑，FormA，FormB应该是dumb components，只能通过传递的道具执行函数。

请注意，上面列出的示例代码只是一个演示。通常您不需要保持FormC状态。相反，我可以。即form，username，password（或任何内容），您应该根据此状态值检查要显示的表单。

Answer 2

我会说你有一个了解三个表单组件的主要组件。最初它呈现其中之一。当您对此更改时，它会更改主要组件的状态（通过回调道具或Flux设计中的操作），并根据状态呈现不同的表单。

Answer 3

这是创建SwitchComponents组件的非常简单的解决方案：

// SwitchComponents.js:

import React from 'react';

export default function SwitchComponents({ active, children }) {
  // Switch all children and return the "active" one
  return children.filter(child => child.props.name == active)
}

并将其导入您的应用程序：

// App.js
import SwitchComponents from './components/SwitchComponents';

export default function App() {

const [activeComponent, setActiveComponent] = useState("questions")

return (
    <SwitchComponents active={activeComponent}>
      <Home name="home" />
      <Instructions name="instructions" />
      <FileboxContainer name="filebox" />
      <Questions name="questions" />
    </SwitchComponents>
  )
}

如果您不想传递“名称”属性，则可以采用以下解决方案：

return children.filter(child => child.type.name == active)

但这就是您在定义组件时为函数赋予的名称，如下所示：

export default function MyFunctionName() { ... } // this is the name

即使您导入了其他名称，它仍然是您必须使用的名称。

改变ReactJS中的视图

3 个答案: