Как сделать HTML-элементы из строки, а затем выбрать элемент в React?
Я хочу получить веб-сайт, а затем преобразовать его в HTML, но не помещать весь HTML в React DOM, сначала выбрать элемент (и, очевидно, его дочерние элементы), а затем поместить этот конкретный элемент в React DOM. Я хочу примерно следующее:
convertHtml = () => {
fetch(url)
.then(res => res.text())
.then(htmlString => {
/*for example the htmlString looks like this:
"<html>
<body>
<div>
<p id = "elementWhatIWant">
I want to earn this element (not the text inside)
</p>
</div>
</body>
</html>"
*/
//what I want:
return stringToHtml(htmlString).getElementById("elementWhatIWant")
})
}
render = () => <div className = "App">
{this.convertHtml()}
</div>Я провел небольшое исследование, но, как я увидел, есть только один способ получить элемент в React, и это ссылка. Поскольку это строка, мы не можем напрямую указать ссылку ни на один элемент. Я подумал, что мы можем проанализировать строку и
- найдите элемент
elementWhatIWantи поместите ссылку на него в виде строки или - найдите элемент
elementWhatIWant, найдите его закрывающий тег и верните только эту часть строки
Ни один из них не кажется хорошим подходом, поэтому я спрашиваю: как лучше всего зарабатывать то, что я хочу?
Ну, у вас также есть ReactDom.findDOMNode, поэтому, если вы объедините предложение FrankerZ с этим ... и извлечете код yuor в отдельный компонент, вы можете сделать это без особых хлопот.
Да, я читал об этом, но я хочу выбрать только дочерний элемент из строки и вставить только его для рендеринга.
В этом случае создайте в памяти пустой элемент DIV. Заполните его строкой innerHTML, и вы сможете получить дочерние узлы с помощью querySelector.
Можете ли вы предоставить мне пример кода использования этих методов?
Вот пример (похожая проблема): stackoverflow.com/questions/49869953/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Как упоминалось ранее, если это простые элементы HTML, вам следует рассмотреть возможность использования реагировать-html-парсер. Это решит вашу проблему гораздо более безопасным способом, чем приведенный ниже dangerouslySetInnerHTML. Смотрите мои коды и ящик здесь для получения дополнительной информации:
class App extends React.Component {
constructor() {
super();
this.state = {
html: null
};
this.fetchHtml = this.fetchHtml.bind(this);
}
async fetchHtml() {
const html = await ajaxPlaceholder();
console.info("Got new html!", html);
const parsed = $(html).find("span");
// From https://stackoverflow.com/a/5744268/4875631
this.setState({
html: parsed[0].outerHTML
});
}
render() {
return (
<div className = "App">
<h1>Hello CodeSandbox</h1>
Escaped: <div>{this.state.html}</div>
<br />
Not Dangerous: <div>{parser(this.state.html)}</div>
<button onClick = {this.fetchHtml}>Fetch some Html</button>
</div>
);
}
}
Я создал кодовый ящик здесь, который демонстрирует функциональность dangerouslySetInnerHTML. Как уже упоминалось, вы хотите использовать dangerouslySetInnerHTML = {{ __html: HTML_YOU_WANT_TO_SET }} для установки html. Пожалуйста, используйте это с осторожностью:
dangerouslySetInnerHTMLis React’s replacement for usinginnerHTMLin the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type outdangerouslySetInnerHTMLand pass an object with a__htmlkey, to remind yourself that it’s dangerous.
const ajaxPlaceholder = () => {
return new Promise(resolve => {
setTimeout(() => resolve("<h1>Test Return</h1>"), 500);
});
};
class App extends React.Component {
constructor() {
super();
this.state = {
html: null
};
this.fetchHtml = this.fetchHtml.bind(this);
}
async fetchHtml() {
const html = await ajaxPlaceholder();
console.info("Got new html!", html);
this.setState({
html
});
}
render() {
return (
<div className = "App">
<h1>Hello CodeSandbox</h1>
Escaped: <div>{this.state.html}</div>
<br />
Dangerous: <div dangerouslySetInnerHTML = {{ __html: this.state.html }} />
<button onClick = {this.fetchHtml}>Fetch some Html</button>
</div>
);
}
}Что, если h1 имеет обертку div в качестве ответа на выборку, но мы хотим выбрать только h1?
@ GergőHorváth Подумайте о том, чтобы проверить мой обновленный ответ (я привел пример с использованием response-html-parser, который намного безопаснее)
Возможно, вам понадобится это, но имейте в виду, что это может сказаться на безопасности. Не принимайте
dangerouslySetInnerHTMLкак должное.