ReactJS-如何在同一页面中创建两个或更多组件
[英]ReactJS - how create two or more components in same page
问题描述
I'm new user of ReactJS and I bumped in a point. 
我是ReactJS的新用户，我碰到了一点。 I'm creating a generic map component, it works perfectly. 我正在创建一个通用的地图组件，它可以完美运行。 However, only can render one component by page. 但是，只能逐页渲染一个组件。 I would like to instead use getElementById , I could use getElementsByClassName . 我想改为使用getElementById ，我可以使用getElementsByClassName 。
Is it possible? 可能吗？ I would like to leave my system generic, where I use many components in same page. 我想让我的系统通用，在同一页面中使用许多组件。
In the example, I use to render 1 map, but if I want to use with 2 or more maps? 在示例中，我用于渲染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>
I would like to use: 我想使用：
ReactDOM.render( React.createElement(MyMap, null) , document.getElementsByClassName('MyMap'));
Code with 1 map example: 带有1个地图示例的代码：
/******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports) { var MyMap = React.createClass({displayName: "MyMap", getDefaultProps: function() { return { widthMap: 600, heightMap: 450 } }, getInitialState: function() { return { url: '' } }, componentWillMount: function() { if ($('#MyMap').attr('comp-url') !== undefined) { this.state.url = $('#MyMap').attr('comp-url'); } this.setState({}); }, render: function() { return (React.createElement("iframe", {src: this.state.url, width: this.props.widthMap, height: this.props.heightMap, frameborder: "0", allowfullscreen: true})); } }); ReactDOM.render( React.createElement(MyMap, null) , document.getElementById('MyMap')); /***/ } /******/ ]);
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://facebook.github.io/react/js/react.js"></script> <script src="https://facebook.github.io/react/js/react-dom.js"></script> </head> <body> <div id="a"></div> <div id="MyMap" comp-url="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3538.7513696363594!2d-48.51497268432733!3d-27.508106824924692!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x952746f0c86515b1%3A0xe8ccb33700020efe!2sCorporate+Park!5e0!3m2!1spt-BR!2sbr!4v1448470435091"></div> </body> </html>
3 个解决方案
解决方案1
1 已采纳 2015-11-25 19:47:34
You can just iterate the result from getElementsByClassName: 您可以仅从getElementsByClassName迭代结果：
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"));
解决方案2
0 2015-11-26 02:25:28
I use jsx with react, you can create a react component that holds all your maps 我将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'));
with this approach, it might be easier for you to just add to the myMaps property. 使用这种方法，将其添加到myMaps属性可能会更容易。
you can also just create a container that will output its children. 您也可以只创建一个将输出其子级的容器。
render(){
return (
<div className="MapContainers">
{ this.props.children }
</div>
)
}
the just put all the MyMap that you will create inside MapContainer 只需将您将在MapContainer中创建的所有MyMap放入
<MapContainer>
<MyMap />
...
</MapContainer>
解决方案3
-1 2015-11-26 00:14:36
If you are using jQuery (I saw you included it on header), you can do this: 如果您使用的是jQuery（我看到您在标头中包含了它），则可以执行以下操作：
$(".MyMap").each(function() {
ReactDOM.render(<MyMap url={$(this).attr('comp-url')} />, this);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.