Как отображать разное время с React / JSX? - PullRequest
Новая
       5

Как отображать разное время с React / JSX?

0 голосов
/ 08 октября 2018

У меня проблемы с рендерингом времени для разных стран, использующих 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>

1 Ответ

0 голосов
/ 08 октября 2018

Попробуйте это 

<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 - рендеринг компонента :

Когда React видит элемент, представляющийопределенный пользователем компонент, он передает атрибуты JSX этому компоненту как один объект.Мы называем этот объект «реквизит».

Другими словами, все атрибуты JSX, которые вы передали компоненту, будут содержаться внутри объекта props.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...