Как объединить строку с JSX

Question

У меня есть ответ сервера, который содержит строку html, которая передается компоненту реакции в качестве опоры. Внутри html есть коды, которые необходимо заменить компонентами React.

Я использовал реакцию-заменитель-заменитель, чтобы заставить это работать, но он не работает с HTML, поскольку теги избегают React. Кто-нибудь знает, как это может быть исправлено?

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 является Реагировать на замену для использования innerHTML в браузер DOM. В общем, установка HTML из кода рискованна, потому что легко непреднамеренно подвергать пользователей межсайтовому скрипту (XSS). Таким образом, вы можете установить HTML непосредственно из React, но у вас есть , чтобы напечатать опасноSetInnerHTML и передать объект с помощью ключа __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/