用另一个组件替换占位符来更新 React 组件

Question

我有一个通过以下方式呈现的反应组件：

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">
        <DangerouslySetInnerHtml text={config.get('text1')} />
      </div>
    </section>
);

}

"text1" 将类似于 <div><ctaPlaceholder></ctaPlaceholder></div> 我想用不同的组件（在我正在渲染的组件中导入）替换那个 ctaPlaceholder。

我已经能够使用普通的 javascript 进行替换，基本上只是在 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]);

为此，我需要在文件中导入 store 和 provider，我认为这不是特别干净，因为我之前在我的解决方案中的一个地方有它。但是，除非有人可以帮助我提供更好的解决方案，否则他们是我能够使其工作的唯一方法

Answer 1

最好的方法是根据 prop 或 state 渲染正确的组件，这就是 react 方式。

我无法告诉您具体的用例，但您的用例的核心将是这样的：

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>
);

您只需要根据状态/道具来决定渲染什么，何时以及最好做什么总是取决于具体的用例。