javascript - How to insert script tag to React -
i'm trying countdown clock in react, problems script tag
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> ) }
it's error this
error in ./public/js/components/gridproducts.js module build failed: syntaxerror: adjacent jsx elements must wrapped in enclosing tag (73:4) 71 | </figure> 72 | </div> > 73 | <script type="text/javascript"> | ^ 74 | $(function(){ 75 | flipclock.lang.custom = { 76 | days:'days',
i tried in componentwillmount script, how can derive value "product.deadline".
using react, should use perplexed problem
you not want this. should use react's lifecycle methods interact dom. in case, dom available in componentdidmount() lifecycle method , able jquery inside of that.
https://facebook.github.io/react/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class
Comments
Post a Comment