Front End-"learning experience"-REACT3 component properties

Source: Internet
Author: User

Label:

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" > <h2 classname= "Commentauthor" >

{This.props.author} </h2> {This.props.children} </div>);

}

});

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}

</h2>

<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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: