复杂条件渲染的react方式是什么？

Question

问题

我对组件的条件渲染有疑问。据我所知，有两种方法可以做到这一点。第一种方法很难看，因为当我必须执行多个 && 条件时会变得很困难。第二种方法很清楚，但是它将组件本身添加到状态中，并且很难使用状态值进行进一步的计算。例如检查错误的消息值是什么。

我已经给出了以下两种方法。请让我知道哪个会更好。除了这两种方法之外，还有其他方法吗？

应用

这是一个简单的应用程序，它根据第一种方法中的 'err' 属性的状态和第二种方法中的 comp 属性的内容来呈现 'Main' 组件或 'Err' 组件。

最初主要组件被渲染。 err 属性在 2 秒后更新为某个值，这会触发重新渲染。这时候我想让 Err 组件渲染出来。

真正的应用程序是我在 componentDidMount 上有一个外部 api 调用，它可能失败或成功。我必须根据结果显示不同的组件。更新多个状态值会稍微复杂一些。为了演示的目的，我已经简化了下面的问题。

两种类型的通用步骤

npx create-react-app react-oop

组件/Err.js

import React,{Component} from 'react'

class Err extends Component {
    render(){
        return(
            <div>
                Error Component
            </div>
            )
    }
}

export default Err

组件/Main.js

import React, {Component} from 'react'

class Main extends Component {
    render(){
        return( 
            <div>
                Main Component
            </div>
        )
    }
}

export default Main

第一种方法

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err'
import Main from './components/Main'

class App extends Component {

  constructor(props){
    super(props)
    this.state = {
      err: null
    }
  this.setError = this.setError.bind(this)
  }

  setError(){
    return(
      this.setState(() => {
        return({
          err: 'Error'
        })
      })
    )
  }

  componentDidMount(){
    setTimeout(this.setError, 2000)
  }

  render() {
    return (
      <div className="App">
       { 
         this.state.err ? <Err /> : <Main />
       }
      </div>
    );
  }
}

export default App;

第二种方法

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err'
import Main from './components/Main'

class App extends Component {

  constructor(props){
    super(props)
    this.state = {
      comp: <Main />
    }
  this.setError = this.setError.bind(this)
  }

  setError(){
    return(
      this.setState(() => {
        return({
          comp: <Err />
        })
      })
    )
  }

  componentDidMount(){
    setTimeout(this.setError, 2000)
  }

  render() {
    return (
      <div className="App">
       {this.state.comp}
      </div>
    );
  }
}

export default App;

Answer 1

我绝对推荐第一种方法。在组件的状态中存储数据 (json)，而不是视图 (jsx)。

实际上有第三种方法可以兼顾两者：

在渲染之前使用 jsx 变量（使用您的逻辑）编辑视图

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err';
import Main from './components/Main';

class App extends Component {

    constructor(props){
        super(props);
        this.state = {
            err: null
        };
    }

    // This way of writing functions saves you the binding
    setError = () => this.setState({err: 'Error'})

    componentDidMount(){
        setTimeout(this.setError, 2000);
    }

    render() {
        let comp = <Main />;
        // Put your logic here so your returned JSX is clear
        if (this.state.err)
            comp = <Err />;
        return (
            <div className="App">
              {comp}
            </div>
        );
    }
}

export default App;

Answer 2

这两种方法本质上是相同的，但我更喜欢选项 1，因为它更容易掌握。你也可以使用babel-plugin-jsx-control-statements#choose 之类的东西，让 React 组件看起来更简单：

<Choose>
  <When condition={ test1 }>
    <Main />
  </When>
  <When condition={ test2 }>
    <AnotherMain />
  </When>
  <Otherwise>
    <Err />
  </Otherwise>
</Choose>