有条件地渲染JSX ReactJS的最佳实践

如何解决有条件地渲染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的最佳实践以及为什么其他方法可能比我目前使用的方法更好的方法感到好奇。

解决方法

这完全取决于您的编码样式。如您所知，React非常简单，并且没有强制执行这样的编码实践。

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

话虽这么说，这样可以帮助您处理多种条件逻辑

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

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