-2

我正在尝试在 React 中做倒计时，但是脚本标签有问题 

      var Product = this.state.productList.map(function (product, i) {
        return (
            <div className="col-md-2 col-sm-3 col-xs-6 grid-figure" key={i+1}>
                <figure>
                    <div className="rewardImage thumbnail_wrapper">
                        <img src={product.picture} alt="#"/>
                    </div>
                    <figcaption className="title">{product.name}</figcaption>
                    <div className="col-md-5 col-sm-5 col-xs-5 padding-none">
                        <figcaption className="price">{product.cost_min}</figcaption>
                    </div>
                    <div className="col-md-7 col-sm-7 col-xs-7 padding-none">
                        <figcaption className="due"><div className="clock-builder-output"></div></figcaption>
                    </div>
                    <div className="col-md-12 col-sm-12 col-xs-12 padding-none">
                        <button type="button" className="btn btn-primary" onClick={self.clickHandler.bind(self, product.productId)}>ĐẤU GIÁ</button>
                    </div>
                </figure>
            </div>
            <script type="text/javascript">
                $(function(){
                    FlipClock.Lang.Custom = {
                        days:'Days',
                        hours:'Hours',
                        minutes:'Minutes',
                        seconds:'Seconds'
                    }
                    var opts = {
                        clockFace: 'DailyCounter',
                        countdown: true,
                        language: 'Custom'
                    }
                    var countdown = product.deadline - ((new Date().getTime())/1000)
                    countdown = Math.max(1, countdown);
                    $('.clock-builder-output').FlipClock(countdown, opts)
                })
            </script>
        )
     }

这是这样的错误

ERROR in ./public/js/components/GridProducts.js
Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (73:4)

  71 |                  </figure>
  72 |              </div>
> 73 |              <script type="text/javascript">
   |                ^
  74 |                  $(function(){
  75 |                      FlipClock.Lang.Custom = {
  76 |                          days:'Days',

我在 componentWillMount 脚本中尝试过，但它如何派生值“product.deadline”。
使用 React，我应该使用也被这个问题困扰

4

1 回答 1

0

你不想这样做。您应该使用 React 的生命周期方法与 DOM 进行交互。在这种情况下，DOM 在 componentDidMount() 生命周期方法中可用，您可以在其中使用 jQuery 做任何事情。

https://facebook.github.io/react/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class

于 2016-11-07T21:47:41.990 回答