Question

我是新来的反应者，我正在尝试在不同的html文件中渲染一个组件（因为我在现有项目中工作），每个组件都有不同的文本。我在想这样的事情：

class ctaSection extends React.Component{

   render(){
       return(
           <div className="cta-section">
           <div className="md:w-9c">
               <h5 className="uppercase">{this.props.h5}</h5>
               <h3>{this.props.h3}</h3>
           </div>
           <div className="cta-button">
               <a href="#">
                   <button className="w-full">{this.props.button}</button>
               </a>
           </div>
       </div>
       );
   }

}

export default ctaSection;

然后，在我的index.js中，我像这样渲染，并传递了道具：

let ctaPage1 = document.getElementById('cta-section-page-1');
let ctaPage2 = document.getElementById('cta-section-page-2');
ReactDOM.render(<CtaSection h3='my text for page 1' h5='my h5 for page 1' button='hello'/>, ctaPage1);
 ReactDOM.render(<CtaSection h3='text for page 2' h5='something' button='click me'/>, ctaPage2);

我不确定这是否是最好，最简单的方法，因为我为同一组件两次调用ReactDOM.render，但出现了此错误：

Uncaught Invariant Violation: Target container is not a DOM element.

如果我一次渲染组件，但是对于多个实例，则效果很好。最好的方法是什么？

Answer 1

我已经考虑了更多，并且没有将React添加到现有网站的经验，但这是我的建议：

每个HTML页面导入 CtaSection 时，我会有1个JS文件，每个文件看起来都像这样：

// page1.js
import CtaSection from '../CtaSection'; // or wherever it is

let ctaPage = document.getElementById('cta-section-page');
ReactDOM.render(<CtaSection h3='my text for page 1' h5='my h5 for page 1' button='hello'/>, ctaPage);

您只需要确保每个html页面使用相应的JS文件即可。

// page1.html 
<body>
    <div id="cta-section-page"></div>
    <script src="page1.js"></script>
</body>

为每个页面重复。

在具有不同文本的不同html页面中多次渲染一个组件

1 个答案: