使用intl FormattedTime,无法以反应中的字符串形式显示时间

时间:2017-08-07 22:06:53

标签: javascript reactjs react-intl

我有这段代码:

<header class="main-header clearfix">
		<h1 class="name"><a href="#">Best City Guide</a></h1>
		<ul class="main-nav">
			<li><a href="#">ice cream</a></li>
			<li><a href="#">donuts</a></li>
			<li><a href="#">tea</a></li>
			<li><a href="#">coffee</a></li>
		</ul>
	</header><!--/.main-header-->   

  
	<div class="banner">
		<h1 class="headline">The Best City</h1>
		<span class="tagline">The best drinks and eats in the best city ever.</span>
	</div><!--/.banner-->
	
  
  <div class="container clearfix">
	<div class="secondary col">
		<h2>Welcome!</h2>
		<p>Everything in this city is worth waiting in line for.</p>
		<p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
		<p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
	</div><div class="primary col">
		<h2>Great food</h2>
		<p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
	</div><div class="tertiary col">
		<h2>How to get here</h2>
		<p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake.</p>
		<p><strong>Train: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin I love fruitcake toffee pie.</p>
		<p><strong>Car: </strong>Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.</p>
	</div><!--/.tertiary-->	
    </div>

	<footer class="main-footer">
		<span>&copy;2017 Residents of The Best City Ever.</span>
	</footer>
	

打印为:

var message = "The event starts at {1}";
var startTime = <FormattedTime value={new Date(eventData.startDateTime)}/>;
message = message.replace("{1}", startTime);

return (
  <div>
    {message}
    <br/>
    <FormattedTime value={new Date(eventData.startDateTime)}/><br/>
  </div>                    
);

我觉得这与javascript有关,而不是反应,但是......为什么它在一个案例中打印为[object Object]而在另一个案例中打印正确的时间?

有没有办法让我的事件字符串有正确的时间?

2 个答案:

答案 0 :(得分:0)

由于问题是由于尝试使用dom对象作为变量,因此一种解决方案是在HTML中完成整个操作并使用intl的FormattedMessage进行字符串替换。这恰好是有效的,因为我已经在我的字符串中使用了大括号内的东西来替换它。

<FormattedMessage id="message" 
   defaultMessage="The event starts at {1}" 
   values={{ 1: startTime }}
/>

答案 1 :(得分:0)

FormattedTime返回一个对象。如果要返回字符串,则必须使用函数formatTime

您可以通过调用&#39; react-intl&#39;中的函数injectInlt来获取它。到您的组件。该功能将在this.props.intl.formatTime()

formatTime(Date.now()); // "4:03 PM"