Javascript 如何插入脚本标记以作出反应

我试图在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>
        )
     }

var Product=this.state.productList.map（函数（产品，i）{
返回(
{product.name}
{产品成本_min}
ĐẤ乌吉
$（函数（）{
FlipClock.Lang.Custom={
天：'天'，
小时：'小时'，
分钟：'分钟'，
秒：“秒”
}
变量选项={
钟面：“DailyCounter”，
倒计时：没错，
语言：“自定义”
}
var countdown=product.deadline-（（新日期（）.getTime（））/1000）
倒计时=数学最大值（1，倒计时）；
$（“.clock builder输出”）.FlipClock（倒计时，选项）
})
)
}

这是一个这样的错误

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',

./public/js/components/GridProducts.js中的

错误
模块构建失败：SyntaxError:相邻的JSX元素必须包装在封闭标记中（73:4）
71 |                  
72 |              
> 73 |              
|                ^
74 |$（函数（）{
75 | FlipClock.Lang.Custom={
76天：“天”，

我在componentWillMount脚本中尝试过它，但它如何从“product.deadline”中获得价值呢。

---

使用React，我应该使用吗？您也对这个问题感到困惑

您不想这样做。您应该使用React的生命周期方法与DOM交互。在这种情况下，DOM可以在componentDidMount（）生命周期方法中使用，您可以在其中使用jQuery执行任何操作

您应该将

{…}{…}

包装到另一个div中，否则会抛出JSX错误。