小编Jus*_*ein的帖子

我的目标是在页面/父组件上动态添加组件.

我从一些基本的示例模板开始,如下所示:

main.js:

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId'));

App.js:

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <div id="myId">myId div</div>
            </div>

        );
    }

});

SampleComponent.js:

var SampleComponent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Sample Component! </h1>
            </div>
        );
    }
});

这里SampleComponent安装到SampleComponent节点,该节点在App.js模板中预先编写.但是如果我需要向App组件添加无限数量的组件呢？显然我不能让所有必需的div坐在那里.

在阅读了一些教程后,我仍然不了解如何创建组件并动态添加到父组件.这样做的方法是什么？

我有一个简单的案例：一个 ES6 Map，我需要向它添加 customget()和set()。

但是Map是一个内置对象，所以我不确定这样做是否会有任何警告。我试图搜索将 a 子类化是否正确Map，并得到了不一致的结果：尚不清楚规范是否允许它，哪些浏览器/node.js 版本支持它，以及可能产生哪些副作用（以及要涵盖的内容）带测试）。

据我了解，扩展Map功能主要有以下三种方法：

1. 将其子类化。我已经完成了，它似乎有效。

class CustomMap extends Map{
    get(key){
        return super.get(key);
    }
    set(key, value){
        return super.set(key, value);
    }
}

它的问题：Internet 上的很多文章都指出，扩展内置对象可能会遇到麻烦。大多数是 2016 年初，现在是 2017 年末，在 Chrome 61 中进行测试。也许现在这是一种安全且受支持的方法？

2. 制作一个包装对象

const Wrapper = function(){
    this._map = new Map();
    this.get = (key) => {return this._map.get(key);}
    this.set = (key, value) => {this._map.set(key, value);}
    ... everything else
}

最不优雅的解决方案，因为我不仅需要实现getand set，还需要实现所有 …