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

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

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

---

为此，我需要在文件中导入存储和提供程序，我认为它不像以前在解决方案中的某个位置那样干净。但除非有人能帮我找到更好的解决方案，否则这是我唯一能让它工作的方法

最好的方法是根据道具或状态渲染正确的组件，这就是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>
);

renderPlaceholder（）{
if（this.state.isCtaPlaceholder）{
返回；
}否则{
返回
}
}
render（）{
var props=this.props，
config=props.config；
返回(
{this.renderPlaceholder（）}
);

---

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

我面临的问题是，我将拥有更多的div作为xt1 div，其中一些不需要更换，一些需要更换，但我不知道何时可以提前更换是否要替换占位符？在渲染时，我找到了一个解决方案。不像以前那样，存储和提供程序只是在我的解决方案中的一个类中，这并不理想，现在我必须导入它们，但它可以工作

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