Рендеринг необработанного html с помощью reactjs
Так это единственный способ визуализации raw html с помощью reactjs?
// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
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>
);
}
});
Я знаю, что есть некоторые интересные способы разметки материала с JSX, но меня в основном интересует возможность визуализации raw html (со всеми классами, встроенными стилями и т. д..). Что-то сложное вроде этого:--3-->
<!-- http://getbootstrap.com/components/#dropdowns-example -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
Я бы не хотел переписывать все это в JSX.
может быть, я думаю об этом все неправильно. Пожалуйста, поправьте меня.
7 ответов
можно использовать html-to-react
модуль npm на https://www.npmjs.com/package/html-to-react.
примечание: Я автор модуля и только что опубликовал его несколько часов назад. Пожалуйста, не стесняйтесь сообщать о любых ошибках или проблемах юзабилити.
теперь есть более безопасные методы для рендеринга HTML. Я покрыл это в предыдущем ответе здесь. У вас есть 4 варианта, последний использует dangerouslySetInnerHTML
.
методы рендеринга HTML
-
простой - используйте Unicode, сохраните файл как UTF-8 и установите
charset
в UTF-8.<div>{'First · Second'}</div>
-
безопасное - используйте номер Юникода для сущности внутри Строка Javascript.
<div>{'First \u00b7 Second'}</div>
или
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
-
или смешанный массив со строками и элементами JSX.
<div>{['First ', <span>·</span>, ' Second']}</div>
-
В Крайнем Случае - вставить необработанный HTML с помощью
dangerouslySetInnerHTML
.<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />
я использовал это в быстрых и грязных ситуациях:
// react render method:
render() {
return (
<div>
{ this.props.textOrHtml.indexOf('</') !== -1
? (
<div dangerouslySetInnerHTML={{__html: this.props.textOrHtml.replace(/(<? *script)/gi, 'illegalscript')}} >
</div>
)
: this.props.textOrHtml
}
</div>
)
}
export class ModalBody extends Component{
rawMarkup(){
var rawMarkup = this.props.content
return { __html: rawMarkup };
}
render(){
return(
<div className="modal-body">
<span dangerouslySetInnerHTML={this.rawMarkup()} />
</div>
)
}
}
Я пробовал этот чистый компонент:
const RawHTML = ({children, className = ""}) =>
<div className={className}
dangerouslySetInnerHTML={{ __html: children.replace(/\n/g, '<br />')}} />
особенности
- принимает
className
prop (проще в стиле) - заменяет
\n
to<br />
(вы часто хотите делать это) - разместить содержимое как дети при использовании компонента, например:
<RawHTML>{myHTML}</RawHTML>
Я поместил компонент в суть на Github:RawHTML: ReactJS чистый компонент для рендеринга HTML-код
dangerouslySetInnerHTML
Не следует использовать без крайней необходимости. Согласно документам, "это в основном для сотрудничества с библиотеками манипуляции строками DOM". Когда вы используете его, вы отказываетесь от преимущества управления DOM React.
в вашем случае довольно просто преобразовать в допустимый синтаксис JSX, просто измените class
атрибуты className
. Или, как упоминалось в комментариях выше, вы можете использовать ReactBootstrap библиотека инкапсулирует элементы Bootstrap в компоненты React
вот немного менее самоуверенная версия функции RawHTML, опубликованной ранее. Это позволяет вам:
- настроить тег
- при необходимости замените новые строки на
<br />
' s - передайте дополнительные реквизиты, которые RawHTML передаст созданному элементу
- введите пустую строку (
RawHTML></RawHTML>
)
вот компонент:
const RawHTML = ({ children, tag = 'div', nl2br = true, ...rest }) =>
React.createElement(tag, {
dangerouslySetInnerHTML: {
__html: nl2br
? children && children.replace(/\n/g, '<br />')
: children,
},
...rest,
});
RawHTML.propTypes = {
children: PropTypes.string,
nl2br: PropTypes.bool,
tag: PropTypes.string,
};
использование:
<RawHTML>{'First · Second'}</RawHTML>
<RawHTML tag="h2">{'First · Second'}</RawHTML>
<RawHTML tag="h2" className="test">{'First · Second'}</RawHTML>
<RawHTML>{'first line\nsecond line'}</RawHTML>
<RawHTML nl2br={false}>{'first line\nsecond line'}</RawHTML>
<RawHTML></RawHTML>
выход:
<div>First · Second</div>
<h2>First · Second</h2>
<h2 class="test">First · Second</h2>
<div>first line<br>second line</div>
<div>first line
second line</div>
<div></div>
он сломается on:
<RawHTML><h1>First · Second</h1></RawHTML>