Front End-"learning experience"-REACT3 component properties

This SectionTo how to add data to a component dynamically. Below, we want to let the content contain its own properties when using comment dependencies author

React this approach is to implement the semantics of the components, so that the components more standardized

Tutorial4.js

var commentlist = React.createclass (

{render:function () {return (<div classname= "Commentlist" > <comment author= "Pete Hunt" >this is one comment& lt;/comment> <comment author= "Jordan Walke" >this is *another* comment</comment> </div>); }

});

So inside the subassembly you need to change to:

Tutorial5.js

var Comment = React.createclass (

{render:function () {return (<div classname= "comment" >

{This.props.author}

}

});

In this way, when the parent component calls the child component to give it the property author and the content this is one comment, the child component can get this author property, as for the content unification as children, here is with the XML inside

Child nodes like

Markdown can be used to format text content, such as adding emphasis tags.

First, import the dependent libraries for markdown:

<script src= "Http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js" ></script>

Next, introduce the react component

var converter = new Showdown.converter ();

var Comment = React.createclass ({

Render:function () {

var rawmarkup = converter.makehtml (this.props.children.toString ());

Return (

<div classname= "comment" >

<H2 classname= "Commentauthor" >

{This.props.author}

<span Dangerouslysetinnerhtml={{__html:rawmarkup}}/>

</div>

);

}

});

After converting the attribute to make the react in HTML rendering, you must add dangerouslysetinnerhtml, otherwise, because react will place XSS attacks and result in text display

Front End-"learning experience"-REACT3 component properties