javascript - Component get duplicated content instead of refreshing -

-

i'm reviewing reactjs, following tutorial @ https://facebook.github.io/react/docs/tutorial.html , when playing example run weird behavior. problem content of 1 element (the comment) doesn't refreshed . instead duplicates new data.

see working fiddle @ http://jsfiddle.net/l0xy4jqa/2/

what's wrong?

code:

/* html */ <script src="http://fb.me/react-js-fiddle-integration.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> <div id="content"></div>  /* js */ var data = [         {author:"mr. raspa pan", color:"darkblue", text: "- content"},         {author:"mrs. pasa sa", color:"darkgreen", text: "- *other* content"},         {author:"mrs. rata tan", color:"brown", text: "- __more__ content"},         {author:"mr. aspa spa", color:"deeppink", text: "- code like:  `for (;true;) {lv(u)}`"}         ];  var data2 = [         {"author":"mrs. raspa pan pan", "color":"blue", "text": ">- *chaged* content"},         {"author":"mrs. pasa sa sa", "color":"green", "text": ">- *other* __changed__ content"},         {"author":"mr. rata tan tan", "color":"red", "text": ">- __more__ **changed** content"},         {"author":"mr. aspa spa spa", "color":"pink", "text": ">- code like: `with (you) { lv(this); }`"}       ];  var comment = react.createclass({   render: function (){     var markdown = marked(this.props.children.tostring(), {sanitize: true});      return(       <div classname="comment" style={{border: "1px solid orange", padding: "5px"}}>         hello, world! comment from:         <h2 classname="commentauthor" style={{color: this.props.color, border: "1px solid purple", margin: "0"}}>           {this.props.author}         </h2> //this line below has problem: should <div classname="commentcontent" ... in order hold <p> returned marked         <p classname="commentcontent" dangerouslysetinnerhtml={{__html: markdown}} />       </div>     );   } });  var commentlist = react.createclass({   render: function(){     var commentnodes = this.props.data.map(function (comment,i){ return(         <comment key={i} author={comment.author} color={comment.color}>{comment.text}</comment>);         }       );     return (       <div classname="commentlist" style={{border: "1px dashed blue", padding: "5px"}}>         hello, world! commentlist. , have comments:         {commentnodes}       </div>     );   } });  var commentbox = react.createclass({   getinitialstate: function(){     return {data: this.props.data};   },   componentdidmount: function () {      var o = this;     settimeout(function(){         o.setstate({data: data2});     },2000);         },   render: function() {     return (       <div classname="commentbox" style={{color: "grey", border: "1px solid red", padding: "5px"}}>         hello, world! commentbox , have list of comments.         <commentlist data={this.state.data}/>       </div>     );   } });  react.render(   <commentbox data={data} url="comments.json"/>,   document.getelementbyid('content') );

the problem marked library returns formatted strings inside <p> element. colliding jsx <p> container. browser tries fix nested paragraph splitting them, causing react lose reference content. i'm editing question point line issue.

so guys, careful dangerouslysetinnerhtml param.


Comments

Post a Comment

Popular posts from this blog

how to do line continuation in perl debugger for entering raw multi-line text (EOT)? -

-
i learning perl. trying in debugger define variable, here-document. not know how enter same code in perl script, in debugger. due new lines present inside eot, makes hard in interactive debugger. here small example. have script: >cat ex1.perl #!/usr/bin/perl -w $s =<<'eot'; first line second line eot print $s now run , gives expected output: >perl ex1.perl first line second line now want same in debugger. tried this: >perl -de0 loading db routines perl5db.pl version 1.39_10 db<1> $s =<<'eot';\ cont: first line\ cont: second line\ cont: eot can't find string terminator "eot" anywhere before eof @ (eval 6) [/usr/share/perl/5.18/perl5db.pl:732] line 2. @ (eval 6)[/usr/share/perl/5.18/perl5db.pl:732] line 2. eval 'no strict; ($@, $!, $^e, $,, $/, $\\, $^w) = @db::saved;package main; $^d = $^d | $db::db_stop; $s =<<\'eot\'; first line second line eot; ' called @ /usr/share/perl...
Read more

android - Linear layout children not scrolling -

-
i'm trying add image views linear layout @ runtime. <linearlayout android:id="@+id/llfolderlayout" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight=".65" android:orientation="horizontal" android:scrollbars="horizontal" > </linearlayout> linearlayout llfoldertabs = (linearlayout) myfolder.findviewbyid(r.id.llfolderlayout); imageview imgtab = new imageview(activity); imgtab.setid(i); imgtab.settag(i); imgtab.setimagedrawable( mcontext.getresources().getdrawable(r.drawable.icon_folder_inactive)); if (i == 0) { imgtab.setimagedrawable( mcontext.getresources().getdrawable(r.drawable.icon_folder_active)); // imgtab.setpadding(10, 0, 4, 0); linearlayout.layoutparams lp = new linearlayout.layoutparams( 74, layoutparams.match_parent); lp.setmargins(15, 0, 0, 0); imgtab.setlayoutparams(lp); } else { // imgtab....
Read more

javascript - Create websocket without connecting -

-
is there way create websocket without connecting right away? far think var ws = new websocket("ws://ws.my.url.com"); creates , connects right away. i'd create socket, define callbacks, , connect once user clicks connect button. thanks no. creating websocket means you've created connection server (or started process of connecting). there no such thing creating websocket isn't connecting yet. you create object store configuration parameters , tell object connect when wanted to, though i'm not sure why that's better creating actual websocket when connect made. or create function setup work , call function later when user clicks connect button.
Read more