There are usually several presentation states for a presentation page (for example, a list page):

When rendering the react list, judge correctly and render the corresponding view, that is, conditional rendering. Unlike vue’s V-IF, V-show and other apis, React conditional rendering is js native plus a bit of hack. For example, the React document mentions.if /else, && and trisomes, etc.

Of course, the above methods are commonly used, but there are also various problems, such as too many conditional branches when the code will become more and more chaotic. Here are a few methods that can be used universally

If /else, ternary, and short circuit operators

These three methods are all mentioned in the official documentation and are put together here, but they are all similar: make judgments in the Render life cycle. However, the ternary and short-circuit operators can be used within the JSX line.

if/else

class List extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['loading'.'error'.'success'.'empty'])
  }
  
  render () {
    const { status } = this.props
    if (status === 'loading') {
      return <div>Loading status</div>
    } 
    
    if (status === 'error') {
      return  <div>Error status</div>
    }


    if (status === 'success') {
      return  <div>The successful state</div>
    }

    if (status === 'empty') {
      return  <div>Empty state</div>}}}Copy the code

As you can see, this approach is much more straightforward, but if you decide to branch more and more, the code will inevitably become very redundant, and the reusability will be a concern.

Render (IF) components

Vue = vue = vue = vue = vue = vue = vue

function Render ({ if: cond, children }) {
	return cond ? children : null
}
Copy the code

The simple Render component above looks like this

class List extends Component {
	static propTypes = {
		status: PropTypes.oneOf(['loading'.'error'.'success'.'empty'])
	}
	
  render () {
    const { status }  = this.props
    return (
      <div>
        <Render if={status= = ='loading'} >Loading status</Render>

        <Render if={status= = ='error'} >Error status</Render>

        <Render if={status= = ='success'} >The successful state</Render>

        <Render if={status= = ='empty'} >Empty state</Render>
      </div>)}}Copy the code

This is much clearer than using a lot of if/else in render. If all the list business components are unified and the state is consistent, we can do a higher level of abstraction by abstracting all the other states into a higher-order function. We just need to make sure that the state of Success is rendered correctly when we write the code

Execute function immediately

In JSX it is possible to write variables and execute functions immediately

class List extends Component {
  static propTypes = {
	  status: PropTypes.oneOf(['loading'.'error'.'success'.'empty'])
  }
  
  render () {
    const { status }  = this.props
    return (
      <div>
        {(() => {
          switch (status) {
            case 'loading':
              return <div>Loading status</div>
            
            case 'error':
              return <div>Error status</div>
            
            case 'success':
              return <div>The successful state</div>
            
            case 'empty':
              return <div>Empty state</div>}}}) ()</div>)}}Copy the code

Reuse of immediate functions is obviously impractical, so immediate functions are suitable for relatively complex components that cannot be reused

High order component

We will not repeat the concept of higher-order components, we put the logic of conditional rendering into higher-order components, in addition to the abstraction of logic, but also improve the reuse rate of components.

const withList = WrappedComponent= > {
  return class PP extends Component {
    render() {
      const { status } = this.props
      switch (status) {
        case 'loading':
          return <div>Loading status</div>
        
        case 'error':
          return <div>Error status</div>
        
        case 'success':
          return <WrappedComponent {. this.props} / >
        
        case 'empty':
          return <div>Empty state</div>}}}}Copy the code

If we can make sure that all the props of the list are the same, we can focus on writing status as success:

@withList
class List extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['loading'.'error'.'success'.'empty'])
  }
  
  render () {
    return (
      <div>Success page</div>)}}Copy the code

Secondly, we can unify the loading, error, and empty state into components, which can undoubtedly play a great role in improving the reuse rate of components.

Reference: blog.logrocket.com/conditional…