Question

我想构建像

这样的React组件

class MyComponent extends React.Component {
    render(){
        return (<div>This is a simple component</div>);
    }
}

并像

一样使用它

<MyComponent></MyComponent>

在几个不同的页面中，甚至在单个html页面中多次。

我不想创建SPA只是为了使用React组件来增强我的Web应用程序的UI。

Answer 1

现在使用React无法满足您的要求，您希望使用所谓的Web组件。

阅读本文以了解如何使用。

另一种方法显然是

ReactDOM.render(<MyComponent />, document.getElementById('id'));

如果你必须坚持使用React。

Answer 2

使用

ReactDOM.render(<MyComponent />, document.getElementById('id'));

您可以在HTML中进行渲染：

<div id="id"></div>

Answer 3

在index.jsx中，更改对元素根getElementById的典型搜索，并将逻辑更改为getElementsByTagName方案。

let elements=document.getElementsByTagName('MyComponent');
for (element of elements){
    ReactDOM.render( <MyComponent />, element );
}

Answer 4

这里有几个选项可以探索