[英]InfoBar Component not visible after rendering
I am building a page using React Js, which involves various components.我正在使用 React Js 构建一个页面,其中涉及各种组件。 But I don't know why, the InfoBar Component is not visible, whereas others seem to work fine.但我不知道为什么,InfoBar 组件不可见,而其他似乎工作正常。 I am not able to find any error within the code section of the component.我无法在组件的代码部分中找到任何错误。 Can someone help me out???有人可以帮我吗??? Here are those components: InfoBar.js以下是这些组件: 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;
InfoBar.css信息栏.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:The parent component 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>
)
The props being passed to the component do contain values, I am sure of that.传递给组件的道具确实包含值,我确信这一点。
You don't appear to be returning anything from InfoBar
, try:您似乎没有从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>
)
Note the use of (
over {
.注意使用(
超过{
。
It's likely there will be an error telling you this.很可能会有一个错误告诉您这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.