reactjs - 复杂条件渲染的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

First approach

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;

Second approach

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)，而不是 View (jsx)。

实际上，还有第三种方法可以结合两者的优点:

use a jsx variable to edit the view (with your logic) before rendering

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;