JSXと文字列を結合する方法

Question

私は、反応成分に小道具として渡されるHTML文字列を含むサーバー応答を持っています。 html内には、Reactコンポーネントで置き換える必要のあるコードがあります。

私はreact-string-replaceを使用してこれを動作させましたが、タグがReactによってエスケープされるため、HTMLでは動作しません。誰かがこれがどのように修正されるか知っていますか？

import React from 'react'; 

import replace from 'react-string-replace'; 
const reg = /\{(name)\}/g; 


const Name = props => { 
    return (
     <div>Hello {props.name}</div> 
    ) 
} 


class Embed extends React.Component { 

    render() { 

     const person = this.props.person 
     const component = <Name name={person.name} key={person.id} />; 
     const output = replace(
      this.props.content, 
      reg, 
      prop => component 
     ); 

     return (
      <div>{output}</div> 
     ) 
    } 
} 

const Greeting = props => { 
    return <Embed content="<div><h1>Greetings</h1> <strong>{name}</strong></div>" person={{ name: 'John', id: 123 }} />; 
}; 

export default Greeting; 

Answer 1

これを試してみてください -

class Embed extends React.Component { 

render() { 

    const person = this.props.person 
    const component = <Name name={person.name} key={person.id} />; 
    const output = replace(
     this.props.content, 
     reg, 
     prop => component 
    ); 

    return (
     <div dangerouslySetInnerHTML={{ __html: output }}></div> 
    ) 
    } 
} 

私は以下のようにそれを行うためのより良い方法を提案 -

const reg = /\{(name)\}/g; 
 

 
const Name = props => { 
 
    return (
 
     <div>Hello {props.name}</div> 
 
    ) 
 
} 
 

 

 
class Embed extends React.Component { 
 

 
    render() { 
 

 
     const person = this.props.person; 
 
     const component = <Name name={person.name} key={person.id} />; 
 

 
     return (
 
      <div><h1>Greetings</h1> <strong>{component}</strong></div> 
 
     ); 
 
    } 
 
} 
 

 
const Greeting = props => { 
 
    return (<Embed person={{ name: 'John', id: 123 }} > 
 
     
 
    </Embed>); 
 
}; 
 

 
ReactDOM.render(
 
    <Greeting/>, 
 
    document.getElementById('test') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="test"> 
 
</div>

Answer 2

はあなたにこれを思い出させるためにウォンツ：

Facebook React Docから：

dangerouslySetInnerHTMLは でブラウザDOMをinnerHTMLプロパティを使用するための交換を反応させるのです。 誤ってクロスサイトスクリプティング （XSS）攻撃にユーザーをさらすことは簡単ですので、コードからHTMLを設定するのは危険です。したがって、ReactからHTMLを直接設定することはできますが、 にはdangerouslySetInnerHTMLを入力し、__html キーでオブジェクトを渡して、危険であることを思い出してください。

これを試してみてください：

const Name = props => { 
    return (
     <div> 
      Hello {props.name} 
     </div> 
    ) 
} 

class Embed extends React.Component { 
    render() { 
    let content = this.props.content.replace('{name}', this.props.person.name); 
     return (
      <div> 
       <Name person={this.props.person}/> 
       <div dangerouslySetInnerHTML={{ __html: content}}></div> 
      </div> 
     ) 
    } 
} 

const Greeting = props => { 
    return <Embed content="<div><h1>Greetings</h1> <strong>{name}</strong></div>" person={{ name: 'John', id: 123 }} />; 
}; 

ReactDOM.render(<Greeting />, document.getElementById('container')); 

確認作業例をjsfiddle上：あなたの応答のためのhttps://jsfiddle.net/h81q9nqd/