Как я могу передать HTML в качестве реквизита в ReactJS

Question

У меня есть значение тега HTML в моей переменной состояния как

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

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

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

, чтобы я мог использовать props для доступа к значению внутри дочернего компонента.Мой дочерний компонент

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

Но это приводит к некоторым ошибкам.Как я могу это исправить?Есть ли другое решение?Заранее спасибо.

Answer 1

Я бы не рекомендовал делать это, но если вы знаете, что делаете, вы можете использовать dangerouslySetInnerHTML prop. Итак, ваш ChildComponent должен быть что-то вроде

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

Но, как я уже сказал, я не рекомендую делать это, так как это может быть уязвимо для атак XSS. Вы можете найти больше информации в React Docs

Answer 2

вы должны использовать jsx для этого,

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

, а затем передать его вашему дочернему компоненту как prop (вот так: тип prop - это node)

<Childcomponent value={someHtml} />

и отобразить его каклюбая другая переменная {value} в дочернем компоненте

Answer 3

Не устанавливайте значение как строку, вместо этого вы можете установить значение динамически, заключая текст в элемент html.

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

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

Таким образом, вы можете динамически устанавливать и визуализировать элемент html.

Вы также можете использовать опасно заданный внутренний html.Вот ссылка для справки, https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html.

Answer 4

Я думаю, что здесь неправильный подход.

Во-первых, состояние должно быть зарезервировано для значений, которые изменяются, или для данных, поступающих из API. Я бы не сказал, что HTML-фрагмент должен быть частью состояния приложения.

Элиран предлагает подход, но опять же, в соответствии с которым дочерний компонент ожидает реквизит, называемый значением.

Есть и другой способ - это «дети», где вы можете использовать html для дочернего компонента.

1009 * Е.Г. *

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

и в самом компоненте ....

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

Прочитайте эту статью на React Children , которая объясняет более подробно