Question

我正在发出api请求，我想显示日期https://www.behance.net/gallery/41658891/Rockefeller-Oslo-Website-Redesign

我像这样接收json

    dates: {
           start: {
           localDate: "2017-04-06",
           localTime: "19:31:00",
           dateTime: "2017-04-06T23:31:00Z",
           dateTBD: false,
           dateTBA: false,
           timeTBA: false,
           noSpecificTime: false
           },
        timezone: "America/New_York",
        status: {
        code: "onsale"
      }
  },

我已经可以显示但是如何将json转换为pic相关，这就是我的渲染效果，我正在使用反应

                     <DateResult_h1 >
                       {item.dates.start.localDate}
                     </DateResult_h1 >

Answer 1

我相信您在链接中引用的内容可能是使用photoshop创建的，但您可以使用css实现类似的功能。

var months = [ "January", "February", "March", "April", "May", "June",
   "July", "August", "September", "October", "November", "December" ];

var dates = 
            {
                       start: 
                       {
                         localDate: "2017-04-06",
                         localTime: "19:31:00",
                         dateTime: "2017-04-06T23:31:00Z",
                         dateTBD: false,
                         dateTBA: false,
                         timeTBA: false,
                         noSpecificTime: false
                       },
                    timezone: "America/New_York",
                    status: 
                    {
                      code: "onsale"
                    }
              }

var DatePicto = React.createClass
({

   render: function() 
   {
     var dateObj = this.props.dateProp.start.localDate;

     var date = dateObj.split('-')[2];
     var month = months[parseInt(dateObj.split('-')[1]) - 1];

     return (
         <div className="divContainer1">
            <div className="month">{month}</div>
            <div className="date">{date}</div>
         </div>
       )
   }
});


ReactDOM.render
(
<div>
    <DatePicto dateProp={dates} /> 
   </div>,
  document.getElementById('container')
);

示例：https://jsfiddle.net/69z2wepo/73684/

以某种方式从json显示日期

1 个答案: