1
votes

Comment puis-je passer du HTML comme accessoire dans ReactJS

J'ai une valeur de balise HTML dans ma variable d'état comme

render() {
    return(
        <div>{this.props.value}</div>
    )
}

Je souhaite afficher ce contenu HTML dans mon composant enfant. J'essaie de faire comme

<Childcomponent value={this.state.value} />

Pour pouvoir utiliser les accessoires pour accéder à la valeur à l'intérieur du composant enfant. Mon composant enfant est

this.state = {
    value: '<p>This is a paragraph</p>'
}

Mais cela produit des erreurs. Comment puis-je réparer cela? N 'y a-t-il pas une autre solution? Merci d'avance.

reactjs react-redux

5 commentaires

À quelle erreur faites-vous face?

Violation invariante: les objets ne sont pas valides en tant qu'enfant React

Afficher le code Childcomponent

Double possible de Reactjs convertir en html

@ssk Veuillez vérifier les modifications

4 Réponses :

3
votes

vous devriez utiliser jsx pour cela,

<Childcomponent value={someHtml} />

puis le passer à votre composant enfant comme accessoire comme celui-ci (le type de prop est node)

const someHtml = (<p>This is a paragraph</p>)

3 commentaires

Je règle dynamiquement la valeur de l'état. Comment puis je faire ça?

vous pouvez également utiliser l'état pour créer le code HTML comme so const someHtml = (

{this.state.value}

)

Dans la console du composant parent quand j'obtiens comme {$$ typeof: Symbol (react.element), tapez: format 'p'} j'obtiens correctement le composant enfant. Mais quand j'obtiens la console avec du HTML pur comme

Ceci est le paragraphe

j'obtiens l'erreur.

3
votes

Je ne recommanderais pas de le faire, mais si vous savez ce que vous faites, vous pouvez utiliser dangerouslySetInnerHTML prop. Donc, votre ChildComponent devrait être quelque chose comme

function ChildComponent(props) {
  return <div dangerouslySetInnerHTML={props.value} />
}

Mais, comme je l'ai dit, je ne recommande pas de le faire, car il peut être vulnérable aux attaques XSS. Vous pouvez trouver plus d'informations dans React Docs

5 commentaires

Ceci est le paragraphe

j'obtiens l'erreur.

Existe-t-il une méthode pour modifier l'élément HTML pour réagir? Quand j'ai défini l'état que j'obtiens uniquement en HTML

Je ne comprends pas vraiment ce que tu veux dire. Pouvez-vous décrire votre cas d'utilisation? Je ne sais pas ce que vous essayez d'accomplir en passant du HTML comme accessoire. Habituellement, vous ne définissez pas l'état sur html, vous avez plutôt html comme composant et lui transmettez des données, comme la réponse d'Eliran. sans comprendre ce que vous essayez d'accomplir, il est difficile de donner une réponse correcte, mais cette réponse fait exactement ce que vous demandez dans la question

Le mien est une fonctionnalité glisser-déposer. Lorsque je fais glisser et déposer un texte ou un paragraphe, je veux simplement envoyer ce

au composant enfant qui remplit la zone déposée.

Je ne peux pas vous dire tous les détails sur la façon de l'implémenter dans un commentaire ici, mais vous ne devriez certainement pas transmettre d'éléments html en tant que valeurs de chaîne dans ce cas d'utilisation. Ce que vous pouvez faire est d'avoir des composants qui sont déplaçables et basés sur des événements de glisser-déposer pour les enregistrer dans l'état (pas une chaîne, mais le composant lui-même). Plus tard, vous pouvez utiliser cette valeur d'état pour rendre ce composant. Vous pouvez rechercher sur Internet pour réagir par glisser-déposer, il existe même une bibliothèque pour cela

3
votes

Je pense que l'approche est erronée ici.

Premièrement, l'état doit être réservé aux valeurs qui changent ou aux données provenant d'une API. Je ne dirais pas qu'un extrait de code html devrait faire partie d'un état d'application.

Eliran suggère une approche, mais là encore, le composant enfant attend un accessoire appelé value.

Il y a aussi une autre façon, qui est «enfants» où vous pouvez injecter en html sur un composant enfant.

Par exemple

const ChildComponent= (props) => {
    return (
        <div>
            <p>{props.value}</p>
            {props.children}
        </div>
    )
}

et dans le composant lui-même .. ..

<Childcomponent value={somePropToPassDown}>
    <p>This is a paragraph</p>
</ChildComponent>

Lisez cet article sur React Children ce qui explique plus en détail

0 commentaires

1
votes

Ne définissez pas la valeur en tant que chaîne à la place, vous pouvez définir la valeur en enveloppant dynamiquement le texte avec un élément html.

constructor(props) {
 super(props);
 this.state = {
  value: ''
 }
}

componentDidMount = async () => {
 this.setState({
  value: <p>This is a paragraph</p>
 })
}

De cette façon, vous pouvez définir et rendre l'élément html dynamiquement.

Vous pouvez également utiliser du code HTML interne dangereusement défini. Voici le lien pour la référence, https: // zhenyong. github.io/react/tips/dangerously-set-inner-html.html .

0 commentaires