Javascript 有条件呈现JSX ReactJS的最佳实践

我很好奇在react组件中有条件地呈现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;

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
常量应用=（）=>{
const[users，setUsers]=useState（[]）；
useffect（（）=>{
//我将在其中设置用户状态
},[])
返回(
{！users | | users.length<1(
新用户
)：null}
);
};
导出默认应用程序；

---

这种逻辑是可行的，但我很好奇关于有条件呈现jsx的最佳实践，以及为什么另一种方法可能比我当前使用的方法更好。

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

然而，我建议您坚持使用早期返回模式，这将大大提高代码的可读性

也就是说，类似这样的东西可以帮助您处理多个条件逻辑

if（users&&users.length）{
返回空
}
返回(
新用户
);

它在他们的电脑中，所以很好。任何回答这一问题的企图都是自以为是的。我不喜欢复杂的三元渲染，但有时这只是最简单的方法。这就是你所说的早期返回模式，即if语句的逻辑，而不是在我的组件内部执行它吗return@RobertTerrell请检查更新的答案，您的逻辑对我来说有点混乱，所以我希望我正确：Dunderstand我以前见过这个方法，而且这个方法看起来更可读