Vous pouvez utiliser des tableaux mixtes avec des chaînes et des éléments JSX (voir les documents ici ):

 not, "working."]} /> 

Il y a un violon ici qui montre son fonctionnement: http://jsfiddle.net/7s7dee6L/

De plus, en dernier recours, vous avez toujours la possibilité d’insérer du code HTML brut, mais faites attention car cela peut vous amener à une attaque de script intersite (XSS) si vous ne désinfectez pas les valeurs de propriété.

En fait, il y a plusieurs façons d’aller avec cela.

Vous voulez utiliser JSX dans vos accessoires

Vous pouvez simplement utiliser {} pour que JSX parsing le paramètre. La seule limitation est la même que pour chaque élément JSX: il ne doit renvoyer qu’un seul élément racine.

 myProp={
Some Ssortingng
} 

La meilleure façon de le faire est de créer une fonction renderMyProp qui renverra les composants JSX (tout comme la fonction de rendu standard), puis d’appeler simplement myProp = {this.renderMyProp ()}

Vous souhaitez ne transmettre que du HTML en tant que chaîne

Par défaut, JSX ne vous permet pas de rendre du HTML brut à partir de valeurs de chaîne. Cependant, il existe un moyen de le faire:

 myProp="
This is some html
" 

Ensuite, dans votre composant, vous pouvez l’utiliser comme ça:

Méfiez-vous que cette solution “peut” s’ouvrir sur les attaques de contrefaçon de script inter-sites. Méfiez-vous également du fait que vous ne pouvez rendre que du HTML simple, pas de tag ou composant JSX ou d’autres choses fantaisistes.

La manière du tableau

En réaction, vous pouvez passer un tableau d’éléments JSX. Cela signifie:

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

Je ne recommanderais pas cette méthode car:

• Il créera un avertissement (clés manquantes)
• Ce n’est pas lisible
• Ce n’est pas vraiment la manière JSX, c’est plus un hack qu’un design prévu.

La voie des enfants

Ajoutez-le pour que ce soit complet, mais en réaction, vous pouvez également obtenir tous les enfants qui sont «à l’intérieur» de votre composant.

Donc, si je prends le code suivant:

  
Some content
 
Some content
  

Ensuite, les deux divs seront disponibles sous le nom this.props.children dans SomeComponent et pourront être rendus avec la syntaxe standard {}.

Cette solution est parfaite lorsque vous n’avez qu’un seul contenu HTML à transmettre à votre composant (Imaginez un composant Popin qui ne prend que le contenu du Popin en tant qu’enfant).

Cependant, si vous avez plusieurs contenus, vous ne pouvez pas utiliser d’enfants (ou au moins vous devez les combiner avec une autre solution ici).

Vous pouvez utiliser dangereusementSetInnerHTML

Il suffit d’envoyer le HTML comme une chaîne normale

Et rendre dans le code JSX comme ceci:

Faites juste attention si vous rendez des données saisies par l’utilisateur. Vous pouvez être victime d’une attaque XSS

Voici la documentation: https://facebook.github.io/react/tips/dangerously-set-inner-html.html

Pour moi, cela a fonctionné en passant une balise HTML dans les accessoires enfants

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

 This is not working.} /> 

et puis dans votre composant, vous pouvez faire le contrôle de prop comme si:

 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 } } } 

Assurez-vous de choisir un seul type de prop.

Sur une application de réaction côté client, il existe plusieurs manières de rendre un accessoire sous forme de chaîne avec du HTML. Un plus sûr que l’autre …

1 – Définir le prop comme jsx (ma préférence)

 const someProps = { greeting: {
Hello${name_profile}
} } const GreetingComopnent = props => ( 
{props.someProps.greeting}
 ) 

• La seule exigence ici est que tout fichier générant cet accessoire doit inclure React en tant que dépendance (dans le cas où vous générez le fichier jsx du prop dans un fichier d’aide, etc.).

2 – Définir dangereusement le code HTML interne

 const someProps = { greeting: 'Hello${name_profile}' } const GreetingComponent = props => { const innerHtml = { __html: props.someProps.greeting } return 
 } 

• Cette deuxième approche est déconseillée. Imaginez un champ d’entrée dont la valeur d’entrée est rendue comme un prop dans ce composant. Un utilisateur pourrait entrer une balise de script dans l’entrée et le composant qui rend cette entrée exécuterait ce code potentiellement malveillant. En tant que telle, cette approche a le potentiel d’introduire des vulnérabilités de script entre sites. Pour plus d’informations, reportez – vous aux documents officiels React

Vous pouvez le faire de 2 manières dont je suis conscient.

1- This is not working.

} />

Et puis faites ça

 class MyComponent extends React.Component { render () { return (
{this.props.text}
) } } 

Ou la deuxième approche le fait comme ça

2-

Et puis faites ça

 class MyComponent extends React.Component { render () { return (
{this.props.children}
) } } 

À partir de React v16.02, vous pouvez utiliser un fragment.

 This is an HTML ssortingng.} /> 

Plus d’infos: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Vous pouvez également utiliser une fonction sur le composant pour transmettre jsx à travers des accessoires. comme:

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

Dans mon projet, je devais passer l’extrait de code HTML dynamic de variable et le rendre à l’intérieur du composant. J’ai donc fait ce qui suit.

 defaultSelection : { innerHtml: {__html: 'some text'} } 

L’ object defaultSelection est transmis au composant à partir du fichier .js

Composant HtmlSnippet

 var HtmlSnippet = React.createClass({ render: function() { return (  ); } }); 

Exemple Plunkr

réagir doc pour dangereusementSetInnerHTML

Oui, vous pouvez le faire en utilisant un tableau de mixage avec des chaînes et des éléments JSX. référence

 not, "working."]} /> 

Y a-t-il une raison pour laquelle personne n’a suggéré react-html-parser? Cela semble être un bon moyen de travailler avec du HTML importé sans avoir à le faire dangereusement.

https://www.npmjs.com/package/react-html-parser

La réponse de @matagus est bonne pour moi, l’espoir ci-dessous aide les personnes qui souhaitent utiliser une variable à l’intérieur.

 const myVar = 'not'; {`${myVar}`}, "working."]} /> 

Avoir ajouté le HTML dans componentDidMount en utilisant jQuery append. Cela devrait résoudre le problème.

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