渲染后信息欄組件不可見

Question

我正在使用 React Js 構建一個頁面，其中涉及各種組件。 但我不知道為什么，InfoBar 組件不可見，而其他似乎工作正常。 我無法在組件的代碼部分中找到任何錯誤。 有人可以幫我嗎？？？ 以下是這些組件： InfoBar.js

import React from "react";
import closeIcon from "../../icons/closeIcon.png";
import onlineIcon from "../../icons/onlineIcon.png";
import "./InfoBar.css";

const InfoBar=({room})=>{
    <div className="infoBar">
        <div className="leftInnerContainer">
            <img className="onlineicon" src={onlineIcon} alt="online"></img>
            <h3>{room}</h3>
        </div>
        <div className="rightInnerContainer">
            <a href="/"><img src={closeIcon} alt="close icon"></img></a>
        </div>
    </div>
}

export default InfoBar;

信息欄.css

.infoBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2979FF;
    border-radius: 4px 4px 0 0;
    height: 60px;
    width: 100%;
  }
  
  .leftInnerContainer {
    flex: 0.5;
    display: flex;
    align-items: center;
    margin-left: 5%;
    color: white;
  }
  
  .rightInnerContainer {
    display: flex;
    flex: 0.5;
    justify-content: flex-end;
    margin-right: 5%;
  }
  
  .onlineIcon {
    margin-right: 5%;
  }

Chat.js：父組件

import InfoBar from "../InfoBar/InfoBar";
.
.
return (
        <div className="outerContainer">
            <div className="container">
                <InfoBar room={room}></InfoBar>
                <Messages messages={messages} name={name}></Messages>
                <Input message={message} setMessage={setMessage} sendMessage={sendMessage}></Input>
            </div>
            <TextContainer users={users}></TextContainer>
        </div>
    )

傳遞給組件的道具確實包含值，我確信這一點。

Answer 1

您似乎沒有從InfoBar返回任何內容，請嘗試：

const InfoBar = ({ room }) => (
    <div className="infoBar">
        <div className="leftInnerContainer">
            <img className="onlineicon" src={onlineIcon} alt="online"></img>
            <h3>{room}</h3>
        </div>
        <div className="rightInnerContainer">
            <a href="/"><img src={closeIcon} alt="close icon"></img></a>
        </div>
    </div>
)

注意使用(超過{ 。

很可能會有一個錯誤告訴您這一點。