时间戳

首页 > 解决方案 > 条件渲染 JSX ReactJS 的最佳实践

javascript - 条件渲染 JSX ReactJS 的最佳实践

问题描述

我对在反应组件中有条件地渲染 JSX 的最佳实践感到好奇，在组件中获取用户数据，如果用户数组小于 1，我想显示新的用户文本，否则我不想显示任何内容。我的代码如下：

import React, { useState, useEffect } from "react";
import "./styles.css";

const App = () => {
  const [users, setUsers] = useState([]);


  useEffect(()=> {
// where I would set the user state 
  },[])

  return (
    <>
      {!users || users.length < 1 ? (
        <div className="section-heading">New Users</div>
      ) : null}
    </>
  );
};
export default App;

这个逻辑有效，但我很好奇关于有条件地渲染 jsx 的最佳实践，以及为什么另一种方法可能比我目前使用的方法更好。

标签： javascriptreactjs

解决方案

这完全取决于您的编码风格。如你所知，React 是非常无主见的，并且没有强制执行这样的编码实践。

但是，我建议您坚持使用提前返回模式，这将大大提高您的代码可读性。

话虽如此，这样的事情将帮助您处理多个条件逻辑

if (users && users.length) {
    return null
}

return (
    <div className="section-heading">New Users</div>
  );

推荐阅读