Javascript ReactJS-如何在同一页面中创建两个或多个组件

我是ReactJS的新用户，我遇到了一个问题。我正在创建一个通用的地图组件，它工作得非常好。但是，只能逐页呈现一个组件。我想改用getElementById，我可以使用getElementsByCassName

可能吗？我想让我的系统保持通用，在同一个页面中使用许多组件

---

在本例中，我使用渲染1个贴图，但如果要使用2个或更多贴图

<div class="MyMap" comp-url="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3538.7513696363594"></div>
<div class="MyMap" comp-url="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d322231313138.7513696363594"></div>

使用1个映射示例编写代码：

/*******/（函数（模块）{//webpackBootstrap
/******///模块缓存
/******/var installedModules={}；
/******///require函数
/******/功能uu网页u需要uu（模块ID）{
/******///检查模块是否在缓存中
/******/if（已安装的模块[moduleId]）
/******/返回已安装的模块[moduleId]。导出；
/******///创建一个新模块（并将其放入缓存）
/******/变量模块=已安装的模块[moduleId]={
/******/导出：{}，
/******/id:moduleId，
/******/加载：false
/******/ 		};
/******///执行模块函数
/******/模块[moduleId]。调用（module.exports、module、module.exports、\uuu网页包\uu require\uuuu）；
/******///将模块标记为已加载
/******/module.loaded=true；
/******///返回模块的导出
/******/返回模块。导出；
/******/ 	}
/******///公开modules对象（\uuuu webpack\u modules\uuuu）
/******/\uuuu网页包\u需要\uuuuu.m=模块；
/******///公开模块缓存
/******/\uuuu webpack\u require\uuuuu.c=已安装的模块；
/******///\u网页包\u公共路径__
/******/_uuu网页包_uurequire_uuu.p=“”；
/******///加载输入模块并返回导出
/******/返回网页需要（0）；
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/功能（模块、导出）{
var MyMap=React.createClass（{displayName:“MyMap”，
getDefaultProps:function（）{
返回{
地图：600，
高度地图：450
}
},
getInitialState:函数（）{
返回{
url:“”
}
},
componentWillMount:function（）{
if（$（'#MyMap'）.attr（'comp-url'）！==未定义）{
this.state.url=$（'#MyMap'）.attr（'comp-url'）；
}
this.setState（{}）；
},
render:function（）{
返回（React.createElement（“iframe”，{src:this.state.url，width:this.props.widthMap，height:this.props.heightMap，frameborder:“0”，allowfullscreen:true}）；
}
});
render（React.createElement（MyMap，null），document.getElementById（'MyMap'）；
/***/ }
/******/ ]);
您只需迭代GetElementsByCassName的结果：

function renderEls(elements) {
    for (var i = 0; i < elements.length; i++) {
        if( $(elements[i]).attr('comp-url') !== undefined ) {
            var url = $(elements[i]).attr('comp-url');
        }
        ReactDOM.render(<MyMap url={url} />, elements[i]);
    }
}

renderEls(document.getElementsByClassName("MyMap"));

函数渲染（元素）{
对于（var i=0；i
如果您使用的是jQuery（我看到您将其包含在标题中），则可以执行以下操作：

$(".MyMap").each(function() {
    ReactDOM.render(<MyMap url={$(this).attr('comp-url')} />, this);
});

$（“.MyMap”）。每个（函数（）{
render（，this）；
});
我将jsx与react一起使用，您可以创建一个包含所有地图的react组件

var MapContainer = React.createClass({
    renderMyMaps: function() {
        return this.props.myMaps.map( function(map, index) {
            return <MyMap url={map.url} widthMap={} heightMap={}/>
            }
        )
    }

    render: function() {
        return (
            <div className="mapContainer">
                { this.renderMyMaps() }
            </div>
        )
    }
})

var MyMap = React.createClass({displayName: "MyMap",
    getDefaultProps: function() {
        return {
            widthMap: 600,
            heightMap: 450
        }
    },
    getInitialState: function() {
        return {
            url: ''
        }
    },
    render: function() {
        return (
            <iframe
                src={this.props.url}
                width={this.props.widthMap}
                height={this.props.heightMap}
                frameborder=0
                allowfullscreen={true} />
        );
    }
});


var maps = [
    {url: '', widthMap: '', heightMap: ''},
    ...
]

ReactDOM.render(<MapContainer myMaps={maps} />,document.getElementById('MyMap'));

只需将要创建的所有MyMap放在MapContainer中即可

<MapContainer>
    <MyMap />
    ...
</MapContainer>


...
为什么不自己试试看是否有问题？我不明白问题是什么，也不明白它与
getElementById
有什么关系。请阅读你的问题，让它变得更好。我试过了，但是，这不管用，你知道怎么做吗@LongNguyen@Nankym您是否尝试过
getElementsByClassName
然后在所有元素上循环，然后将React组件渲染到该元素中？@longuyen，我举个例子，看看是否变得更清晰
GetElementsByCassName（“MyMap”）。forEach==未定义
，因为它是节点列表，而不是数组。谢谢@LongNguyen的回答！
render(){
    return (
        <div className="MapContainers">
            { this.props.children }
        </div>
    )
 }

<MapContainer>
    <MyMap />
    ...
</MapContainer>