Question

reactJS的新手，我试图让我的一个组件在许多CRUD状态（创建对象，列出对象，更新对象，删除对象）之间交替，每个组件都会显示相应的表单......

我想这样做，但我不知道我的想法是否有缺陷。

constructor() {
    super(props);

    this.state = {
        list: true,
        edit: false,
        create: false,
        // and so on for CRUD operations
}

然后会有一种方法......

handleCRUDViewChange(newView) {
    // flip everything to false...
    // turn the correct one to true
}

然后在渲染中会是这样的......

switch (true) {
case this.state.list:
    <ListComponent />
case this.state.edit:
    <EditComponent />
// and so on...
}

我的想法听起来了吗？这是＆＃34;反应＆＃34;做事的方式？

Answer 1

是的，你走在正确的轨道上。您可能想稍微简化一下 -

const MODES = {LIST: 0, EDIT: 1, CREATE: 2},
CRUD_COMPONENTS = [ListComponent, EditComponent, CreateComponent];
constructor(){
    this.state = {"mode" : MODES.LIST};
},
handleCRUDViewChange(newView) {
   // decide the relevantMode value out of LIST, EDIT or CREATE based on your logic
   // and then update state
   this.setState({"mode": MODES[relevantMode]});
}
render(){
   let Component = CRUD_COMPONENTS[this.state.mode];
   return <Component />;
}

在您的简单示例中，您不必将CRUD模式特定状态发送到组件，而在实际情况下，您可能需要编写更多逻辑来存储特定于模式的道具并将它们传递给选定的模式组件

Answer 2

对于每个crud视图，不需要维护单独的状态变量。代码可以简化为

constructor() {
super(props);
this.state = {
      crudView : 'list'
     }
}

handleCRUDViewChange(newView) {
this.setState({
     crudView : newView
   })    
}

还必须相应地更改条件渲染

switch(this.state.crudView) {
case 'list':
     <ListComponent/>
case 'edit':
     <EditComponent/>
//and so on
}

reactJS如何在许多应用程序状态之间进行更改

2 个答案: