programing

반응 - HTML 태그를 소품으로 넘기는 방법

megabox 2023. 3. 15. 19:30
반응형

반응 - HTML 태그를 소품으로 넘기는 방법

다음과 같이 HTML 태그로 텍스트를 전달할 수 있으면 좋겠습니다.

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

지지 of of of of of of of 의 내부MyComponent 방식,시, 인쇄 this.props.text이치

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

리액트 파스를 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 컴포넌트를 상상해 보십시오).

다만, 복수의 컨텐츠가 있는 경우는, 아이를 사용할 수 없습니다(또는 적어도 여기서 다른 솔루션과 조합할 필요가 있습니다).

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

위험하게 SetInner를 사용할 수 있습니다.HTML

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

.<></>HTML의 프래그먼트

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

참고 자료: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html#jsx-fragment-syntax

<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을 사용하여 프로펠을 문자열로 렌더링하는 방법이 몇 가지 있습니다.하나는 다른 것보다 안전하다...

1 - 프로펠을 jsx로 정의합니다(내 취향).

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


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

• 여기서 유일한 요구사항은 이 프로펠을 생성하는 파일이 무엇이든 React를 종속 요소로 포함해야 한다는 것입니다(프로펠의 jsx를 도우미 파일에 생성하는 경우 등).

2 - innerHtml을 위험하게 설정한다.

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

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

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

나는 html 태그를 소품 어린이에게 전달하여 작동했다.

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


var MyComponent = React.createClass({

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

텍스트 소품 유형을 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>)
   }
}

이 태스크에서는 React fragment를 정상적으로 이용할 수 있습니다.사용하는 React 버전에 따라 짧은 구문을 사용할 수 있습니다.<> 풀태그: " " " " 입니다.<React.Fragment>특히 HTML 태그 내에서 문자열 전체를 랩하고 싶지 않은 경우에 적합합니다.

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

html-react-parser의 파서가 좋은 솔루션입니다.그냥 하면 돼

  • npm 또는 실과 함께 설치하다
  • 'html-react-parser'에서 파서를 Import한다.

  • 다음과 같이 호출합니다.

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

    잘 작동해요.

다음과 같이 합니다.

const MyText = () => {
     return (
          <>
               This is <strong>Now</strong> working.
          </>
     )
}

그리고 소품으로 전달합니다.

<MyComponent Text={MyText} />

이제 컴포넌트에서 사용할 수 있습니다.

const MyComponent = ({Text}) => {
     return (
          <>
               // your code
               {<Text />}
               // some more code
          </>
     )
 }

@matagus 답변은 괜찮습니다.아래 스니펫이 변수를 사용하고 싶은 분들에게 도움이 되었으면 합니다.

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

프로젝트에서는 변수에서 동적 html 스니펫을 전달하여 컴포넌트 내부에 렌더링해야 했습니다.그래서 나는 다음과 같이 했다. 

defaultSelection : {
    innerHtml: {__html: '<strong>some text</strong>'}
}

default Selection 객체가 다음 위치에서 컴포넌트로 전달됩니다..js파일

<HtmlSnippet innerHtml={defaultSelection.innerHtml} />

HtmlSnippet 컴포넌트

var HtmlSnippet = React.createClass({
  render: function() {
    return (
      <span dangerouslySetInnerHTML={this.props.innerHtml}></span>
    );
  }
});

플런커의 예

위험한 SetInner에 대한 문서 응답HTML

또한 구성요소의 함수를 사용하여 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."]} />

답변에 추가:해석하려고 하는데 이미 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()} />

나한테 그랬던 것처럼 이게 도움이 될지도 몰라!

우리는 그런 방법으로 같은 일을 할 수 있다.

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

이 HTML을 부모 컴포넌트라는 이름의 다른 컴포넌트 안에 송신하려고 합니다.

발신:-

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

자녀 사용:-

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

저에게 딱 맞는 작품입니다.

여기에서는, 다음의 솔루션을 사용하고 있지 않습니다.dangerouslySetInnerHTML이름처럼 위험하죠

import { IntlProvider, FormattedMessage } from "react-intl";

<FormattedMessage
          id="app.greeting"
          description="Bold text example"
          defaultMessage="Look here, I can include HTML tags in plain string and render them as HTML: <b>Bold</b>, <i>Italics</i> and <a>links too</a>."
          values={{
            b: (chunks) => <b>{chunks}</b>,
            i: (chunks) => <i>{chunks}</i>,
            a: (chunks) => (
              <a class="external_link" target="_blank" href="https://jiga.dev/">
                {chunks}
              </a>
            )
          }}
        />

이것은 다음과 같이 렌더링해야 합니다.

지가를 반응시키다

https://jiga.dev/react-render-string-with-html-tags-from-props/의 전체 예

난 이거면 돼

<MyComponent text={<>some text <strong>bold text</strong> and more.</>} />

또한 여기서 변수를 전달하려면 다음과 같이 시도할 수 있습니다.

<MyComponent text={<>My name is {variableName}. <strong>Bold text</strong> normal text</>} />

jQuery append를 사용하여 componentDidMount에 html을 추가했습니다.이것으로 문제가 해결될 겁니다.

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

        return (
           <div>

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

언급URL : https://stackoverflow.com/questions/33381029/react-how-to-pass-html-tags-in-props

반응형

'programing' 카테고리의 다른 글

리액트 라우터를 사용하여 페이지를 새로고침하려면 어떻게 해야 하나요?  (0) 2023.03.15
스프링 부트 웹 앱이 Gradle에서 완전히 실행되지 않는 이유는 무엇입니까?  (0) 2023.03.15
TypeScript에서 HTLement의 종류를 확인하는 방법  (0) 2023.03.15
WordPress는 빈 스팬 태그를 제거합니다.  (0) 2023.03.15
피클이야, 존이야?  (0) 2023.03.15

'programing'의 다른글

  • 현재글반응 - HTML 태그를 소품으로 넘기는 방법

관련글

댓글

티스토리툴바