React组件条件渲染异常：无法进入else分支求助

组件调用方式 #

<div className="sidebar__chats">
  <SidebarChat addNewChat />
  <!-- 其他SidebarChat组件 -->
</div>

期望第一个组件显示“add new chat”，其余显示头像，但当前无法进入对应分支；去掉!后所有组件都显示头像，仍无法触发else分支。

现有组件代码 #

function SidebarChat(addNewChat) {
  const [seed, setSeed] = useState("");
  useEffect(() => {
    setSeed(Math.floor(Math.random() * 5000));
  }, []);
  const createChat = () => {
    const roomName = prompt("please enter the name for chat");
    if (roomName) {
      //do some clever database stuff
    }
  };
  return (
    <>
      {!addNewChat ? (
        <div className="sidebarChat">
          <Avatar
            alt="João Espinheira"
            src={`https://avatars.dicebear.com/api/pixel-art/${seed}.svg`}
            sx={{ width: 38, height: 38 }}
          />
          <div className="sidebarChat__info">
            <h2>room name</h2>
            <p>last message...</p>
          </div>
        </div>
      ) : (
        <div onClick={createChat} className="sidebarChat">
          <h2>add new chat</h2>
        </div>
      )}
    </>
  );
}
export default SidebarChat;

原因 #

React组件的参数是完整的props对象，你直接将参数命名为addNewChat，此时这个变量代表的是整个props对象，而非你传入的addNewChat属性。由于props对象永远是真值，所以!addNewChat永远为false，导致一直走头像分支；去掉!后addNewChat为真值，依然走头像分支，永远无法进入“add new chat”分支。

解决办法 #

有两种方式修正：

1. 解构props获取属性
   修改组件的参数定义，直接解构出addNewChat：

   function SidebarChat({ addNewChat }) {
     // 后续代码不变
   }
   

2. 通过props对象访问属性
   将组件参数改为props，然后通过props.addNewChat判断：

   function SidebarChat(props) {
     // ...其他代码
     return (
       <>
         {!props.addNewChat ? (
           // 头像分支
         ) : (
           // add new chat分支
         )}
       </>
     )
   }
   

修正后，当你传入<SidebarChat addNewChat />时，addNewChat会被解析为布尔值true，就能正确进入“add new chat”分支；未传入该属性的组件会走头像分支。

内容的提问来源于stack exchange，提问作者JoaoEsp