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

}

＆＃34;文本1＆＃34;会是这样的 <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]);

我需要在文件中导入商店和提供商，我不认为这是特别干净的，因为我之前只在我的解决方案的一个地方。但除非有人可以帮助我找到更好的解决方案，否则他们只有这样才能让它发挥作用

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

你只需要根据 state / props 来决定渲染什么，何时和最好做的i总是依赖于具体的用例。

使用占位符替换另一个组件

1 个答案: