電子メールテンプレートのタグを置き換えます

Question

私は、コンポーネント内のタグを置き換える最善の方法を理解しようとしています。

John, 

www.test.com 

You can sign in with your email address (email@email.com) 
Your password is: 
supersecurepassword 

Thanks! 

Bob Law's Law Blog 

：私は、ユーザーの種類として更新し、ライブプレビューウィンドウで、これを表示したい

export default class Template extends Component { 
    componentWillMount() { 
    this.setState({ 
     mergeTags: { 
     '*|FIRSTNAME|*': 'John', 
     '*|LINK|*': 'www.test.com', 
     '*|EMAIL|*': 'email@email.com', 
     '*|PASSWORD|*': 'supersecurepassword', 
     '*|SIGNATURE|*': 'Bob Law's Law Blog' 
     } 
    }) 
    } 

：だから、次のテキスト...

*|FIRSTNAME|*, 

*|LINK|* 

You can sign in with your email address (*|EMAIL|*) 
Your password is: 
*|PASSWORD|* 

Thanks! 

*|SIGNATURE|* 

、これを与えられました

Answer 1

あなたの正確な設定はわかりませんが、このようなものが動作するはずです。ここ JSFiddleデモ：https://jsfiddle.net/jonahe/zrrfyxh7/

class Parent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     '*|FIRSTNAME|*': 'John', 
     '*|LINK|*': 'www.test.com', 
     '*|EMAIL|*': 'email@email.com', 
     '*|PASSWORD|*': 'supersecurepassword', 
     '*|SIGNATURE|*': "Bob Law's Law Blog" 
    }; 
    } 
    // use componentDidMount, or else the ref thing below won't work. 
    componentDidMount() { 
    let innerText = this.templateElement.innerHTML; 
    // loop through all the properties/"tags" 
    for(let tagKey in this.state) { 
     // replace the occurence of the tag key string, with the tag value in this.state 
     innerText = innerText.replace(tagKey, this.state[tagKey]) 
    } 
    this.templateElement.innerHTML = innerText; 

    } 
    render() { 
    // get a reference to the element that contains the raw template 
    return <p ref={ template => this.templateElement = template }> 
     *|FIRSTNAME|*, 
     *|LINK|* 

     You can sign in with your email address (*|EMAIL|*) 
     Your password is: 
     *|PASSWORD|* 

     Thanks! 

     *|SIGNATURE|* 
    </p>; 
    } 
} 

お役に立てば幸いです。何かが不明な場合は教えてください。

：テンプレートが純粋なテキストではなくHTMLのような、よりリアクション的な例を追加しました。 JSFiddle：https://jsfiddle.net/jonahe/539g38kc/