【React】React条件渲染

在React中，条件渲染是非常常见的需求，它允许你根据组件的state或props来决定渲染哪些内容。下面是一些常用的方法来实现条件渲染：

1. 使用if语句

虽然你不能直接在JSX中使用if语句，但可以在组件的方法或渲染函数中使用它，并返回不同的JSX。

function MyComponent(props) {  

  const isLoggedIn = props.isLoggedIn;  

  let content;  

  if (isLoggedIn) {  

    content = <p>Welcome back!</p>;  

  } else {  

    content = <p>Please log in.</p>;  

  }  


  return (  

    <div>  

      {content}  

    </div>  

  );  

}

2. 使用逻辑与(&&)运算符

逻辑与运算符可以用来在条件为真时渲染JSX。

function MyComponent(props) {  

  const isLoggedIn = props.isLoggedIn;  

  return (  

    <div>  

      {isLoggedIn && <p>Welcome back!</p>}  

      {!isLoggedIn && <p>Please log in.</p>}  

    </div>  

  );  

}

3. 使用三元运算符(?:)

三元运算符可以用来根据条件返回两个值中的一个。

function MyComponent(props) {  

  const isLoggedIn = props.isLoggedIn;  

  return (  

    <div>  

      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}  

    </div>  

  );  

}

4. 使用数组map或filter方法

当需要根据条件渲染列表时，可以使用数组的map或filter方法。

function MyComponent(props) {  

  const items = props.items;  

  const isLoggedIn = props.isLoggedIn;  

  // 只渲染已登录用户的项目  

  const filteredItems = isLoggedIn ? items : [];  

  return (  

    <div>  

      <ul>  

        {filteredItems.map((item) => (  

          <li key={item.id}>{item.name}</li>  

        ))}  

      </ul>  

    </div>  

  );  

}

5. 使用内联函数

虽然不推荐在渲染方法中频繁使用内联函数（因为它可能导致不必要的重新渲染），但在某些情况下，使用内联函数可能很方便。

function MyComponent(props) {  

  const isLoggedIn = props.isLoggedIn;  

  const renderLoginStatus = () => {  

    if (isLoggedIn) {  

      return <p>Welcome back!</p>;  

    } else {  

      return <p>Please log in.</p>;  

    }  

  };  


  return (  

    <div>  

      {renderLoginStatus()}  

    </div>  

  );  

}

6. 使用switch语句（不常见）

在 React 中，switch语句虽然不常见，但你也可以使用switch语句在渲染函数中根据多个条件渲染不同的JSX。

尽管 JSX 本身不支持直接使用 switch 语句，但你可以在组件的渲染方法内部使用 switch 语句来决定返回什么 JSX。switch 语句在 JavaScript 中是合法的，并且可以用来基于不同的条件执行不同的代码块。

以下是一个简单的例子，展示了如何在 React 组件中使用 switch 语句：

import React from 'react';  


function MyComponent(props) {  

  const { type } = props;   

  let content;  

  switch (type) {  

    case 'type1':  

      content = <p>This is type 1</p>;  

      break;  

    case 'type2':  

      content = <div>This is type 2</div>;  

      break;  

    case 'type3':  

      content = (  

        <div>  

          <h2>This is type 3</h2>  

          <p>With additional content</p>  

        </div>  

      );  

      break;  

    default:  

      content = <p>Unknown type</p>;  

      break;  

  }  


  return (  

    <div>  

      {content}  

    </div>  

  );  

}  

  

export default MyComponent;

在这个例子中，MyComponent 接收一个 type prop，然后使用 switch 语句基于 type 的值来决定渲染什么内容。每个 case 分支返回相应的 JSX，如果 type 不匹配任何已知的 case，则执行 default 分支。

记住，为了优化性能，应该避免在渲染方法中创建不必要的函数或对象，并且尽量减少组件的不必要重新渲染。在复杂的情况下，考虑使用React的memoization技术（如useMemo或React.memo），或者将渲染逻辑提取到独立的组件中。