React - Как передать HTML-теги в реквизитах?

Ответ 1

Вы можете использовать смешанные массивы со строками и элементами JSX (см. docs здесь):

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

Здесь есть скрипка, которая показывает, что она работает: http://jsfiddle.net/7s7dee6L/

Кроме того, в крайнем случае у вас всегда есть возможность вставить необработанный HTML, но будьте осторожны, потому что это может открыть вам крест (XSS), если они не дезинфицируют значения свойств.

Ответ 2

На самом деле есть несколько способов пойти с этим.

Вы хотите использовать JSX внутри своих реквизитов

Вы можете просто использовать {}, чтобы заставить JSX проанализировать параметр. Единственное ограничение - это то же, что и для каждого элемента JSX: он должен возвращать только один корневой элемент.

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

Самый читаемый способ для этого - создать функцию renderMyProp, которая вернет компоненты JSX (как и стандартную функцию рендеринга), а затем просто вызовет myProp = {this.renderMyProp()}

Вы хотите передать только HTML в виде строки

По умолчанию JSX не позволяет вам отображать необработанные HTML из строковых значений. Однако есть способ сделать так:

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

Затем в вашем компоненте вы можете использовать его так:

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

Остерегайтесь, что это решение "может" открываться при атаках поддельных скриптовых скриптов. Также будьте осторожны, что вы можете отображать только простой HTML, не тег JSX или компонент или другие интересные вещи.

Метод массива

В ответ вы можете передать массив элементов JSX. Это означает:

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

Он не рекомендовал бы этот метод, потому что:

• Будет создано предупреждение (отсутствующие ключи)
• Не читается
• На самом деле это не JSX-способ, это скорее взлом, чем предполагаемый дизайн.

Детский путь

Добавляя это для полноты, но в реакции, вы также можете получить всех детей, которые "внутри" вашего компонента.

Итак, если я возьму следующий код:

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

Затем два div будут доступны как this.props.childrens в SomeComponent и могут быть отображены с помощью стандартного синтаксиса {}.

Это решение идеально подходит, когда у вас есть только один HTML-контент для передачи вашему компоненту (представьте компонент Popin, который принимает только содержимое Popin в качестве дочерних элементов).

Однако, если у вас есть несколько содержимого, вы не можете использовать детей (или вам нужно хотя бы объединить их с другим решением здесь)

Ответ 3

Вы можете использовать dangerouslySetInnerHTML

Просто отправьте html как обычную строку

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

И выполните визуализацию в коде JSX следующим образом:

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

Просто будьте осторожны, если вы предоставляете данные, введенные пользователем. Вы можете стать жертвой атаки XSS

Здесь документация: https://facebook.github.io/react/tips/dangerously-set-inner-html.html

Ответ 4

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

а затем в вашем компоненте вы можете сделать так, чтобы проверить:

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

Убедитесь, что вы выбрали только один тип опоры.

Ответ 5

Для меня он работал, передавая html-тег в реквизитах children

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


var MyComponent = React.createClass({

   render: function() {
    return (
      <div>this.props.children</div>
    );
   },

Ответ 6

Вы можете сделать это двумя способами, о которых я знаю.

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

И затем сделайте это

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

Или второй подход делает это так:

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

И затем сделайте это

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

Ответ 7

Вы также можете использовать функцию на компоненте для передачи по jsx через реквизиты. как:

 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>
     );
  },

});

Ответ 8

В моем проекте мне пришлось передать динамический html-фрагмент из переменной и сделать его внутри компонента. Поэтому я сделал следующее.

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

defaultSelection объект передается компоненту из .js файла

<HtmlSnippet innerHtml={defaultSelection.innerHtml} />

Компонент HtmlSnippet

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

Пример Plunkr

отредактировать doc для опасноSetInnerHTML

Ответ 9

Да, вы можете это сделать, используя массив смешивания со строками и элементами JSX. ссылка

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

Ответ 10

Приложили html в componentDidMount, используя jQuery append. Это должно решить проблему.

 var MyComponent = React.createClass({
    render: function() {

        return (
           <div>

           </div>
        );
    },
    componentDidMount() {
        $(ReactDOM.findDOMNode(this)).append(this.props.text);
    }
});