다음과 같이 HTML 태그로 텍스트를 전달할 수 있기를 원합니다.

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

그러나 MyComponent의 렌더링 메서드 내부에서를 인쇄 this.props.text하면 문자 그대로 모든 것을 인쇄합니다.

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

React가 HTML을 구문 분석하고 올바르게 덤프하는 방법이 있습니까?

문자열 및 JSX 요소와 함께 혼합 배열을 사용할 수 있습니다 ( 여기 문서 참조 ).

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

작동하는 것을 보여주는 바이올린이 있습니다 : http://jsfiddle.net/7s7dee6L/

또한 마지막 수단으로 항상 원시 HTML을 삽입 할 수 있지만 속성 값을 삭제하지 않으면 XSS (교차 사이트 스크립팅) 공격에 노출 될 수 있으므로주의해야합니다.

사실, 여러 가지 방법이 있습니다.

소품 내부에서 JSX를 사용하고 싶습니다.

{}를 사용하여 JSX가 매개 변수를 구문 분석하도록 할 수 있습니다. 유일한 제한은 모든 JSX 요소와 동일합니다. 하나의 루트 요소 만 반환해야합니다.

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

이를위한 가장 읽기 쉬운 방법은 JSX 구성 요소를 반환하는 renderMyProp 함수 (표준 렌더링 함수와 동일)를 만든 다음 myProp = {this.renderMyProp ()}를 호출하는 것입니다.

HTML 만 문자열로 전달하려고합니다.

기본적으로 JSX에서는 문자열 값에서 원시 HTML을 렌더링 할 수 없습니다. 그러나 그렇게하는 방법이 있습니다.

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

그런 다음 구성 요소에서 다음과 같이 사용할 수 있습니다.

<div dangerouslySetInnerHTML=myProp={{ __html: this.renderMyProp() }}></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가 SomeComponent에서 this.props.children으로 사용 가능하며 표준 {} 구문으로 렌더링 될 수 있습니다.

이 솔루션은 구성 요소에 전달할 HTML 콘텐츠가 하나만있을 때 완벽합니다 (Popin의 콘텐츠 만 자식으로 사용하는 Popin 구성 요소를 상상해보십시오).

그러나 콘텐츠가 여러 개인 경우 자녀를 사용할 수 없거나 적어도 여기에서 다른 솔루션과 결합해야합니다.

위험하게 사용할 수 있습니다 .SetInnerHTML

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

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

소품 유형을 하나만 선택하십시오.

나를 위해 그것은 소품 어린이에 html 태그를 전달하여 작동했습니다.

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


var MyComponent = React.createClass({

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

React v16.02부터 Fragment를 사용할 수 있습니다.

<MyComponent text={<Fragment>This is an <strong>HTML</strong> string.</Fragment>} />

더 많은 정보 : https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

클라이언트 측 반응 애플리케이션에서 일부 html이있는 문자열로 소품을 렌더링하는 몇 가지 방법이 있습니다. 하나는 다른 것보다 안전합니다 ...

1-소품을 jsx로 정의 (내 기본 설정)

const someProps = {
  greeting: {<div>Hello<a href="/${name_profile}">${name_profile}</a></div>}
}


const GreetingComopnent = props => (
  <p>{props.someProps.greeting}</p>
)

• 여기서 유일한 요구 사항은이 prop을 생성하는 파일이 React를 종속성으로 포함해야한다는 것입니다 (헬퍼 파일 등에서 prop의 jsx를 생성하는 경우).

2-innerHtml을 위험하게 설정

const someProps = {
  greeting: '<React.Fragment>Hello<a href="https://stackoverflow.com/${name_profile}">${name_profile}</a></React.Fragment>'
}

const GreetingComponent = props => {
  const innerHtml = { __html: props.someProps.greeting }
  return <p dangerouslySetInnerHtml={innerHtml}></p>
}

•이 두 번째 접근 방식은 권장되지 않습니다. 이 컴포넌트에서 입력 값이 prop으로 렌더링되는 입력 필드를 상상해보십시오. 사용자는 입력에 스크립트 태그를 입력 할 수 있으며이 입력을 렌더링하는 구성 요소는 잠재적으로 악성 코드를 실행합니다. 따라서이 접근 방식은 사이트 간 스크립팅 취약점을 유발할 수 있습니다. 자세한 내용 은 공식 React 문서를 참조하세요.

텍스트 소품 유형을 any로 설정 하고 다음을 수행하십시오.

<MyComponent text={
    <React.Fragment>
        <div> Hello, World!</div>
    </React.Fragment>
    } 
/>

예

내가 아는 두 가지 방법으로 할 수 있습니다.

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

@matagus 대답은 나에게 괜찮습니다. 스 니펫 아래의 희망은 내부 변수를 사용하려는 사람들에게 도움이됩니다.

const myVar = 'not';
<MyComponent text={["This is ", <strong>{`${myVar}`}</strong>,  "working."]} />

내 프로젝트에서 변수에서 동적 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 예

dangerouslySetInnerHTML에 대한 문서 반응

컴포넌트에서 함수를 사용하여 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>
     );
  },

});

예, 문자열 및 JSX 요소와 함께 배열을 혼합하여 사용할 수 있습니다. 참고

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

에서 파서 HTML-반응 파서는 좋은 솔루션입니다. 당신은 단지

• npm 또는 원사로 설치
• 'html-react-parser'에서 파서를 가져옵니다.

• 다음과 같이 전화하십시오.

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

  잘 작동합니다.

답변에 추가 : 구문 분석을하려고하는데 이미 JSX에 있지만 중첩 된 속성이있는 객체가있는 경우 JSX 구문 분석을 강제하기 위해 괄호를 사용하는 것이 매우 우아한 방법입니다.

const TestPage = () => (
  <Fragment>
    <MyComponent property={
    {
      html: (
        <p>This is a <a href='#'>test</a> text!</p>
      )
    }}>
    </MyComponent>
  </Fragment>
);

이 질문에는 이미 많은 답변이 있지만 이와 관련하여 뭔가 잘못하고 있었고 공유 할 가치가 있다고 생각합니다.

나는 다음과 같은 것을 가지고 있었다.

export default function Features() {
  return (
    <Section message={<p>This is <strong>working</strong>.</p>} />
  }
}

하지만 마사지가 그보다 길어서 다음과 같은 것을 사용해 보았습니다.

const message = () => <p>This longer message is <strong>not</strong> working.</p>;

export default function Features() {
  return (
    <Section message={message} />
  }
}

함수 호출에서 ()가 누락되었음을 깨닫는 데 시간이 걸렸습니다.

작동하지 않는

<Section message={message} />

일

<Section message={message()} />

나에게 그랬던 것처럼 이것이 당신을 도울 것입니다!

이 작업에 React 조각 을 성공적으로 활용할 수 있습니다 . 사용하는 React 버전에 따라 짧은 구문 : <>또는 전체 태그 :를 사용할 수 있습니다 <React.Fragment>. HTML 태그 내에서 전체 문자열을 래핑하지 않으려는 경우 특히 잘 작동합니다.

<MyComponent text={<>Hello World. <u>Don't be so ruthless</u>.</>} />

우리는 그런 방식으로 똑같은 일을 할 수 있습니다.

const Child = () => {
  return (
     write your whole HTML here.
  )
}

이제이 HTML을 부모 구성 요소라는 다른 구성 요소 내부로 보내려고합니다.

전화 :-

<Parent child={<child/>} >
</Parent> 

아이의 사용 :-

 const Parent = (props) => {
   const { child } = props; 
   return (
       {child}
    )
}

이 작업은 나에게 완벽합니다.

jQuery append를 사용하여 componentDidMount에 html을 추가했습니다. 이렇게하면 문제가 해결됩니다.

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

        return (
           <div>

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