アップデートは、私は経由でレンダリングされた反応成分を持つ別のコンポーネント

Question

に置き換えるプレースホルダを持つコンポーネントに反応します別のコンポーネント（レンダリング中のコンポーネント内にインポートされます）。

私は通常のjavascriptを使って置き換えることができました。基本的にはreplaceの関数をcomponentDidMountに書きますが、単なる文字列ではなく完全なコンポーネントに置き換えたいと思います。

おかげで、

アップデート：私はこの内部componentDidMount置くことが出ている

結局

：

ReactDOM.render(<Provider store={store}> 
    <CTA className="myClass" url={this.props.config.get('ctaUrl')} style={{color: this.props.config.get('submitColor')}}>Foo</CTA> 
</Provider>, document.getElementsByTagName('cta')[0]); 

私は、このためにファイルに保存し、プロバイダをインポートする必要が、私はドン私は私の解決策の1つの場所の前にそれを持っていたので、特別にきれいだと思います。しかし、誰かがより良い解決策を手伝うことができない限り、私はそれを働かせるようにしかできませんでした。

Answer 1

これを行う最良の方法は、小道具や状態に基づいて正しいコンポーネントをレンダリングすることです。

私はあなたの特定のユースケースを伝えることはできませんが、ご使用のケースのためのコアはこのようなものになります、

renderPlaceholder() { 
    if (this.state.isCtaPlaceholder) { 
    return <DangerouslySetInnerHtml text={config.get('text1')} />; 
    } else { 
    return <OtherComponent /> 
    } 
} 

render() { 
    var props = this.props, 
    config = props.config; 

    return(
    <section className="prompt" data-component="prompt" style={{color: config.get('promptTextColor')}}> 
     <div className="prompt-text-1 emphasis-font-web-safe"> 
     { this.renderPlaceholder() } 
     </div> 
    </section> 
); 

あなただけ状態/小道具に基づいてレンダリングするかを決定する必要がありますいつ、私はいつも特定のユースケースに依存しています。