ReactJS

Question

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

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

在示例中，我使用渲染 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>

我想使用：

ReactDOM.render( React.createElement(MyMap, null) , document.getElementsByClassName('MyMap'));

带有 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>

Answer 1

您可以只迭代 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"));

Answer 2

如果您正在使用 jQuery（我看到您将其包含在 header 中），您可以这样做：

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

Answer 3

我将 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'));

使用这种方法，您可能更容易只添加到 myMaps 属性.

您也可以只创建一个容器来输出其子项。

render(){
    return (
        <div className="MapContainers">
            { this.props.children }
        </div>
    )
 }

只需将您要创建的所有 MyMap 放入 MapContainer

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

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

ReactJS - how create two or more components in same page

javascript

dom

components