ReactJS - 如何在同一页面中创建两个或多个组件 [英] ReactJS - how create two or more components in same page

问题描述

我是ReactJS的新用户，我突然发现。我正在创建一个通用的地图组件，它的工作完美。但是，只能逐页呈现一个组件。我想使用 getElementById ，我可以使用 getElementsByClassName 。

可以吗？我想离开我的系统通用，我在同一页面中使用了许多组件。

---

在这个例子中，我使用要渲染1张地图，但是如果我想使用2张或更多张地图？

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

我想使用：

  ReactDOM.render（React.createElement（MyMap，null），document.getElementsByClassName（'MyMap'））; 
  

代码与1地图示例：

  / ****** /（function（modules）{// webpackBootstrap / ****** / //模块缓存/ ****** / var installedModules = {}; / ****** / // require函数/ ****** / function __webpack_require __（moduleId）{/ ****** / //检查模块是否在缓存中/ ****** / if（installedModules [moduleId]）/ ****** / return installedModules [moduleId] .exports; / ****** / //创建一个新模块（并将其放入缓存）/ *** *** / var module = installedModules [moduleId] = {/ ****** / exports：{}，/ ****** / id：moduleId，/ ****** / loaded：false / ****** /}; / ****** / //执行模块函数/ ****** / modules [moduleId] .call（module.exports，module，module.exports，__webpack_require__） ; / ****** / //将模块标记为已加载/ ****** / module.loaded = true; / ****** / //返回t的导出他模块/ ****** / return module.exports; / ****** /} / ****** / //公开模块对象（__webpack_modules __）/ ****** / __webpack_require__ .m = modules; / ****** / //公开模块缓存/ ****** / __webpack_require __。c = installedModules; / ****** / // __webpack_public_path __ / ***** * / __webpack_require __。p =; / ****** / //加载入口模块并返回export / ****** / 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 =MyMapcomp-url =https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3538.7513696363594!2d-48.51497268432733!3d-27.508106824924692!2m3！ ！！1F0 2f0的3f03平方米1i1024 2i768 4f13.13立方米1平方米1s0x952746f0c86515b1％3A0xe8ccb33700020efe 2sCorporate +公园5e03平方米1spt-BR 2sbr 4v1448470435091\" >！！！！！！< / DIV>< / body>< / html>  

解决方案>

你可以迭代getElementsByClassName的结果：

  function renderEls（elements）{
 for（var i = 0; i< elements.length; i ++）{
 if（$（elements [i]）。attr（'comp-url'）！== undefined）{
 var url = $ （元件[1]）ATTR（ 'COMP-URL'）; 
} 
 ReactDOM.render（&MyBetMap url = {url} /> elements [i]）; 
} 
} 
 
 renderEls（document.getElementsByClassName（MyMap））; 
  

I'm new user of ReactJS and I bumped in a point. 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.

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?

<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:

/******/ (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>

解决方案

You can just iterate the result from 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"));

这篇关于ReactJS - 如何在同一页面中创建两个或多个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！