Как анализировать строку с переменными в реагирующий компонент?

Question

У меня есть строка с переменной внутри:

var template = '<div>Hello {username}</div>'; 

Имя пользователя, устанавливается государством, как разобрать эту строку и превратить его в среагировать компонент?

Answer 1

Использование RegExp для идентификации всех {} наборов. Затем замените значение значением состояния и обновите строку. Наконец, используйте dangerouslysetinnerhtml , чтобы вставить HTML-строку в ответный узел. См. Пример.

Надеюсь, это поможет!

class App extends React.Component{ 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     username: 'Pranesh', 
 
     userId: 124, 
 
    } 
 
    } 
 
    render(){ 
 
    var template = '<div>Hello {username}. Your user id is {userId}.</div>'; 
 
    var r = template.match(/\{[\w]+\}/g); 
 
    r && r.forEach((state) => { 
 
     var regex = new RegExp(state, 'g') 
 
     var stateItem = state.split(/{|}/g)[1] 
 
     template = template.replace(regex, this.state[stateItem]) 
 
    }) 
 
    return <div dangerouslySetInnerHTML={{__html: template}}/> 
 
    
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<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="app"></div>

Answer 2

Я не уверен, что вы пытаетесь сделать, но вы можете сделать вар template = (<div>{this.state.username}</div>)