React - How to pass HTML tags in requisites?

Question

I want to be able to pass text using HTML tags, for example:

<MyComponent text="This is <strong>not</strong> working." /> 

But inside the MyComponent rendering MyComponent , when I print this.props.text , it literally prints everything:

 This is <strong>not</strong> working. 

Is there a way to get React to parse the HTML and upload it correctly?

Answer 1

You can use mixed arrays with strings and JSX elements (see docs here ):

 <MyComponent text={["This is ", <strong>not</strong>, "working."]} /> 

There is a fiddle here that shows that it works: http://jsfiddle.net/7s7dee6L/

In addition, as a last resort, you always have the opportunity to embed raw HTML , but be careful because this can open the cross (XSS) for you if they do not sanitize the property values.

Answer 2

There are actually several ways to go about this.

Do you want to use JSX inside your details

You can simply use {} to force JSX to parse the parameter. The only limitation is the same as for each JSX element: it should return only one root element.

 myProp={<div><SomeComponent>Some String</div>} 

The most readable way to do this is to create a renderMyProp function that will return the JSX components (like the standard rendering function) and then just call myProp = {this.renderMyProp ()}

You want to pass only HTML as a string

By default, JSX does not allow you to display raw HTML from string values. However, there is a way to do this:

 myProp="<div>This is some html</div>" 

Then in your component you can use it like this:

 <div dangerouslySetInnerHTML={this.props.myProp}></div> 

Beware that this solution may “open” when attacking fake scripts. Also be careful that you can only display plain HTML, not a JSX tag or component or other interesting things.

Array method

In response, you can pass an array of JSX elements. It means:

 myProp={["This is html", <span>Some other</span>, "and again some other"]} 

He would not recommend this method because:

• A warning will be generated (missing keys)
• Not readable
• This is actually not a JSX method, it is rather a hack than the intended design.

Children's way

By adding this for completeness, but in reaction, you can also get all the children that are “inside” your component.

So, if I take the following code:

 <SomeComponent> <div>Some content</div> <div>Some content</div> </SomeComponent> 

Then two divs will be available as this.props.childrens in SomeComponent and can be displayed using the standard {} syntax.

This solution is ideal when you have only one HTML content to pass to your component (imagine a Popin component that only accepts Popin content as children).

However, if you have multiple content, you cannot use children (or you need to at least combine them with another solution here)

Answer 3

You can use dangerouslySetInnerHTML

Just send html as normal line

 <MyComponent text="This is <strong>not</strong> working." /> 

And do the visualization in JSX code as follows:

 <h2 className="header-title-right wow fadeInRight" dangerouslySetInnerHTML={{__html: props.text}} /> 

Just be careful if you provide user input. You may be a victim of an XSS attack.

Here's the documentation: https://facebook.imtqy.com/react/tips/dangerously-set-inner-html.html

Answer 4

 <MyComponent text={<span>This is <strong>not</strong> working.</span>} /> 

and then in your component you can do so to check:

 import React from 'react'; export default class MyComponent extends React.Component { static get propTypes() { return { text: React.PropTypes.object, // if you always want react components text: React.PropTypes.any, // if you want both text or react components } } } 

Make sure that you select only one type of support.

Answer 5

It worked for me, passing the html tag in the details of the children

 <MyComponent>This is <strong>not</strong> working.</MyComponent> var MyComponent = React.createClass({ render: function() { return ( <div>this.props.children</div> ); }, 

Answer 6

You can do this in two ways that I know of.

1- <MyComponent text={<p>This is <strong>not</strong> working.</p>} />

And then do it

 class MyComponent extends React.Component { render () { return (<div>{this.props.text}</div>) } } 

Or the second approach does it like this:

2- <MyComponent><p>This is <strong>not</strong> working.</p><MyComponent/>

And then do it

 class MyComponent extends React.Component { render () { return (<div>{this.props.children}</div>) } } 

Answer 7

You can also use the function on the component to transfer via jsx through the details. as:

  var MyComponent = React.createClass({ render: function() { return ( <OtherComponent body={this.body} /> ); }, body() { return( <p>This is <strong>now</strong> working.<p> ); } }); var OtherComponent = React.createClass({ propTypes: { body: React.PropTypes.func }, render: function() { return ( <section> {this.props.body()} </section> ); }, }); 

Answer 8

In my project, I had to pass a dynamic html fragment from a variable and make it inside the component. So I did the following.

 defaultSelection : { innerHtml: {__html: '<strong>some text</strong>'} } 

The defaultSelection object is passed to the component from the .js file

 <HtmlSnippet innerHtml={defaultSelection.innerHtml} /> 

HtmlSnippet Component

 var HtmlSnippet = React.createClass({ render: function() { return ( <span dangerouslySetInnerHTML={this.props.innerHtml}></span> ); } }); 

Plunkr example

edit doc for dangerous SetInnerHTML

Answer 9

Yes, you can do this using a mix array with strings and JSX elements. link

 <MyComponent text={["This is ", <strong>not</strong>, "working."]} /> 

Answer 10

Applied html to componentDidMount using jQuery append. This should solve the problem.

  var MyComponent = React.createClass({ render: function() { return ( <div> </div> ); }, componentDidMount() { $(ReactDOM.findDOMNode(this)).append(this.props.text); } });