You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ReactJS中如何让Clocks组件返回的多元素在同一行显示

avatar
安全阿岳
2026-8-26
问题

我在App.js的代码片段中遇到的问题与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>

worldClocks.js中的Clocks组件用于计算各时区的日期和时间，会在页面上生成各证券交易所的当前时间列表，目前是分行显示：

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

我尝试用App.scss中的CSS设置让它们显示在同一行，但没有效果，相关CSS代码如下：

.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;
}

我推测Clocks组件是一次性返回所有内容而非逐个返回，想请教如何用CSS让这些时钟显示在同一行？能否通过函数传递CSS？这种场景下的最佳实践是什么？

附worldClocks.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;
解决方案

一、CSS调整实现同行显示

问题核心是Clock组件的根元素是div（块级元素），默认独占一行，父容器的flex设置无法覆盖这个特性。可以通过以下两种方式修改：

方式1：直接修改Clock容器的显示属性 

/* 让每个Clock项变成行内块元素 */
.worldClocks Clock,
.worldClocks Clock > div {
    display: inline-block;
    margin-right: 20px; /* 可选：添加项间距 */
}

方式2：给Clocks内部的Clock包裹容器加flex布局

先给Clocks组件里包裹所有Clock的div添加className：

// 在Clocks的render方法中修改
<div className="clocks-container">
  {/* 所有Clock组件 */}
</div>

然后添加CSS：

.clocks-container {
    display: flex;
    gap: 20px; /* 用gap控制项间距，比margin更灵活 */
    flex-wrap: wrap; /* 可选：超出容器宽度时自动换行 */
}

二、通过props传递CSS（组件样式自定义）

可以给Clock组件传递style或className props，让组件样式更灵活：

步骤1：修改Clock组件接收样式props 

class Clock extends React.Component {
  render() {
    return (
      <div style={this.props.style} className={this.props.className}>
        <div>
            {this.props.name} 
            {this.props.date.toLocaleTimeString(this.props.country, {timeZone: this.props.timeZone})}
        </div>
      </div>
    )
  }
}

步骤2：调用Clock时传递样式

  • 直接传行内样式：
<Clock
    name="ASX(10): "
    date={this.state.date}
    country="en-AU"
    timeZone="Australia/Sydney"
    hour12="false"
    style={{display: 'inline-block', marginRight: '20px'}}
/>
  • 或者传自定义className：
<Clock
    // ...其他props
    className="clock-item"
/>

然后在CSS中定义：

.clock-item {
    display: inline-block;
    margin-right: 20px;
}

三、场景最佳实践

  1. 组件结构优化：抽离数据循环渲染
    把时钟数据抽成数组，循环渲染Clock组件，避免重复代码，提升可维护性：
// 在Clocks组件中定义数据数组
const clockData = [
  {name: "ASX(10): ", country: "en-AU", timeZone: "Australia/Sydney"},
  {name: "TSE(9:30): ", country: "en-AU", timeZone: "Asia/Tokyo"},
  // ...其他时钟数据
];

// 渲染时循环生成Clock
<div className="clocks-container">
  {clockData.map((item, index) => (
    <Clock
        key={index}
        name={item.name}
        date={this.state.date}
        country={item.country}
        timeZone={item.timeZone}
        hour12="false"
        className="clock-item"
    />
  ))}
</div>
  1. 样式隔离：使用CSS Modules或CSS-in-JS
    用CSS Modules或者styled-components可以避免全局样式污染，比如用styled-components：
import styled from 'styled-components';

const ClockItem = styled.div`
    display: inline-block;
    margin-right: 20px;
    color: inherit;
`;

// 在Clock组件中替换根div
class Clock extends React.Component {
  render() {
    return (
      <ClockItem>
        <div>
            {this.props.name} 
            {this.props.date.toLocaleTimeString(this.props.country, {timeZone: this.props.timeZone})}
        </div>
      </ClockItem>
    )
  }
}
  1. 性能优化：避免不必要重渲染
    用React.memo包裹Clock组件，减少非必要的重渲染：
const MemoizedClock = React.memo(Clock);

之后在Clocks组件中使用MemoizedClock替代原Clock组件即可。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.26 07:03:18