Question

我无法使用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>

Answer 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对象内。

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

1 个答案: