如何使用 React/JSX 显示不同的时间？答案

【问题标题】：How do i display different times with React/JSX?如何使用 React/JSX 显示不同的时间？
【发布时间】：2018-10-08 04:09:49
【问题描述】：

我在使用 JSX 为不同国家/地区渲染时间时遇到了麻烦，而没有硬编码返回值，如下面的代码所示。我尝试通过 Date.now 传递它，但它没有用。我想为三个随机国家做这件事。我将如何构建它？

这是我当前的代码

<html>
 <head>
   <!-- we need to specify the react framework here -->
   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 </head>
<body>
<div id="root"></div>
<script type="text/babel">



function Clock(props, city) {
  return <h1>The time is {props.date.toLocaleTimeString({timeZone:'Europe/London'})}</h1>
}


function tick () {
  ReactDOM.render(
    <Clock date={new Date()}/>,
    document.getElementById('root')
  )
}
setInterval(tick, 1000)


</script>
</body>
</html>

【问题讨论】：

标签： javascript node.js reactjs jsx

【解决方案1】：

试试这个

<html>
 <head>
   <!-- we need to specify the react framework here -->
   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 </head>
<body>
<div id="root"></div>
<script type="text/babel">

function Clock(props) {
  return <h1>The time is {props.date.toLocaleTimeString({timeZone:props.city})}</h1>
}

function tick () {
  ReactDOM.render(
    <Clock date={new Date()} city='Europe/London'/>,
    document.getElementById('root')
  )
}
setInterval(tick, 1000)
</script>
</body>
</html>

原因是，根据React Document - Rendering a Component：

当 React 看到一个代表用户定义组件的元素时，它将 JSX 属性作为单个对象传递给该组件。我们称之为这个对象“道具”。

换句话说，您传递给组件的所有 JSX 属性都将包含在 props 对象中。

【讨论】：