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

소품 내부에서 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 구성 요소를 상상해보십시오).

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

답변

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

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

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

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


var MyComponent = React.createClass({

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

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

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


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

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