如何用CSS在ReactJS的同一行中显示函数返回的多个项目

Question

我的问题是"Clocks"(而不是"Clock")

function App() {
return (
<div>
<section className="section">
<div className="box-main">
<div className="firstHalf">
<div className ="top-line">
<Clock></Clock><Quotes></Quotes>              
</div>
<div className = "worldClocks">
<div><Clocks></Clocks></div>
</div>

函数" clock& quot;是一个时区日期&在worldclock .js"中计算时间它在屏幕上生成当前时间的股票交易所列表，并将它们显示在单独的行中，像这样…

ASX(10): 11:52:25 am
TSE(9:30): 10:52:25 am
SSE(9:15): 9:52:25 am
HKE(9:30): 9:52:25 am
SGX(9:00): 9:52:25 am
NSE(9:00): 7:22:25 am
DIFX(10:00): 5:52:25 am
RTS(9:30): 4:52:25 am
JSE(9:30): 3:52:25 am
FWB(9:30): 3:52:25 am
LSE(8): 02:52:25
BM/F(10): 22:52:25
NYSE(9.30): 9:52:25 PM
TXE(9.30): 9:52:25 PM

我试图让css(在App.scss)把它们放在一行，但没有任何工作。我的应用程序。SCSS相关部分如下:

.box-main {
color: white; //text colour
margin-left: 25px;    
}     
.firsthalf {
min-width: 100%;
display: flex;
}    
.top-line {
font-size: 1em;
max-width: 100%;
display: flex;
align-content: space-between;
gap: 30px;
}    
.worldClocks {
display: inline-flex;
flex-direction: row;
}

我不确定如何找出调用worldClocks返回的内容，但我认为它是一次性发送所有内容，而不是每个worldClock单独计算。如果是这种情况，我的问题是我如何使用css告诉它，然后显示所有这些时钟在同一行?我可以通过函数传递css吗?什么是最好的实践方法，假设我是正确的原因。

编辑:下面是请求worldClock.js文件(供参考clock.js文件无关,它只是同样命名并产生当前日期和时间但不是连接到这)

import React from 'react';
//import * as ReactDOM from 'react-dom';
import { Component } from 'react';

// Timezone strings - https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
// Changed update setInterval to 30 seconds (30000) instead of every second (1000)
class Clocks extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.updateDate = this.updateDate.bind(this);
}
componentDidMount() {
this.interval = setInterval(this.updateDate, 30000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
updateDate() {
this.setState({
date: new Date()
});
}
// Add all the world clocks wanted in here and in order of display
render() {
return (
<div>
<div>{this.props.name}</div>
<div>
<Clock
name="ASX(10): "
date={this.state.date}
country={"en-AU"}
timeZone={"Australia/Sydney"}
hour12={"false"}
/>
<Clock
name="TSE(9:30): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Tokyo"}
hour12={"false"}
//timeStyle="short"
/>
<Clock
name="SSE(9:15): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Shanghai"}
hour12={"false"}
//timeStyle="short"
/>
<Clock
name="HKE(9:30): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Hong_Kong"}
hour12={"false"}
/>
<Clock
name="SGX(9:00): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Singapore"}
hour12={"false"}
/>
<Clock
name="NSE(9:00): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Kolkata"}
hour12={"false"}
/>
<Clock
name="DIFX(10:00): "
date={this.state.date}
country={"en-AU"}
timeZone={"Asia/Dubai"}
hour12={"false"}
/>
<Clock
name="RTS(9:30): "
date={this.state.date}
country={"en-AU"}
timeZone={"Europe/Moscow"}
hour12={"false"}
/>
<Clock
name="JSE(9:30): "
date={this.state.date}
country={"en-AU"}
timeZone={"Africa/Johannesburg"}
hour12={"false"}
/>
<Clock
name="FWB(9:30): "
date={this.state.date}
country={"en-AU"}
timeZone={"Europe/Berlin"}
hour12={"false"}
/>
<Clock
name="LSE(8): "
date={this.state.date}
country={"en-GB"}
timeZone={"Europe/London"}
hour12={"false"}            
/>
<Clock
name="BM/F(10): "
date={this.state.date}
country={"en-GB"}
timeZone={"America/Sao_Paulo"}
hour12={"false"}            
/>
<Clock
name="NYSE(9.30): "
date={this.state.date}
country={"en-US"}
timeZone={"America/New_York"}
hour12={"false"}
/>
<Clock
name="TXE(9.30): "
date={this.state.date}
country={"en-US"}
timeZone={"America/Toronto"}
hour12={"false"}
/>
</div>
</div>
);
}
}
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
isHidden: true
};
this.showClock = this.showClock.bind(this);
}
showClock() {
this.setState({
isHidden: !this.state.isHidden
});
}
// This bit sends back the clock and the time
render() {
return (
<div>
<div>
{this.props.name} 
{this.props.date.toLocaleTimeString(this.props.country, {timeZone: this.props.timeZone})}
</div>
</div>
)
}
}
//ReactDOM.render(<Clocks name="THE CLOCK" />, document.getElementById("root"));
export default Clocks;

Answer 1

在你的worldClock.js文件中，div包含了所有的Clock组件，你能给它添加一个类并使这个类显示:inline

Answer 2

也许你可以尝试制作最直接的div时钟要显示的组件:内联。就是下面这个div {this.props.name}div

我想应该可以。