Javascript React组件类元编程

我正在使用React和React引导组件

我在React-Bootstrap库中发现了一些问题，我通过编辑React-Bootstrap.js文件“修复”（或“变通”）了这些问题。问题是，如果明天react-bootstrap的新版本问世，那么我将不得不将我在react-bootstrap.js文件中编写的所有代码复制到新版本中。我不想这样做，所以我想知道是否有一种方法可以修改react-bootstrap提供的组件类（即更改渲染函数），而不必接触react-bootstrap.js文件。问题是我不知道如何做到这一点，或者至少我发现不容易理解组件类的内部工作。关于我如何才能做到这一点，有什么想法吗

---

提前谢谢

您可以使用包装组件，该组件在安装后覆盖原始组件的方法：

    function wrapComponent (originalComponent, override) {
        return React.createClass({
            componentDidMount: function () {
                for (var property in override) {
                    if (override.hasOwnProperty(property)) {
                        this.refs.original[property] = override[property];
                    }
                }
            },
            render: function () {
                return this.transferPropsTo(
                    <originalComponent ref="original">{ this.props.children }</originalComponent>
                );
            }
        });
    }

    var ConsoleSample = React.createClass({
        // This method can still be used:
        prefix: function (text) {
            return "prefix: " + text;
        },
        // This method will be overridden:
        output: function (text) {
            console.log(this.prefix(text));
        },
        onClick: function () {
            this.output("Hello world");
        },
        render: function () {
            return <button onClick={this.onClick}>{ this.props.children }</button>
        }
    });

    var Application = React.createClass({
        render: function () {
            var AlertSample = wrapComponent(ConsoleSample, { 
                output: function (text) {
                    alert(this.prefix(text));
                }
            });
            return <div>
                <ConsoleSample>This should console.log</ConsoleSample>
                <AlertSample>This should alert</AlertSample>
            </div>
        }
    });

    React.renderComponent(<Application />, document.body.lastChild);

函数包装组件（原始组件，覆盖）{
返回React.createClass({
componentDidMount:函数（）{
for（覆盖中的var属性）{
if（override.hasOwnProperty（property））{
this.refs.original[property]=重写[property]；
}
}
},
渲染：函数（）{
将此.transferPropsTo返回(
{this.props.children}
);
}
});
}
var ConsoleSample=React.createClass({
//此方法仍然可以使用：
前缀：函数（文本）{
返回“前缀：”+文本；
},
//此方法将被覆盖：
输出：函数（文本）{
log（this.prefix（text））；
},
onClick:function（）{
输出（“Hello world”）；
},
渲染：函数（）{
返回{this.props.children}
}
});
var Application=React.createClass({
渲染：函数（）{
var AlertSample=wrapComponent（控制台示例，{
输出：函数（文本）{
警报（此.前缀（文本））；
}
});
返回
这应该是console.log
这应该引起警惕
}
});
React.renderComponent（，document.body.lastChild）；

---

不过，这是一个简单的破解。我同意正确的解决方案是fork-React引导。

最好编辑并构建自己的版本。使用git可以合并主repo上的更改。如果你想让他们考虑把它包含在主项目中，你也可以发送一个拉动请求。我认为我没有足够的JS、Bootstrap或反应经验来为这个项目做出有价值的贡献。另外，我不熟悉所涉及的开发工具，等等。。。我宁愿只报告问题，并在我的项目中做一些小的调整/修复。不过还是要谢谢你！你好谢谢你的回答：）我在考虑直接使用某种反射修改类。类似于有一个react-bootstrap-fixes.js文件，我可以在其中为类设置新方法，然后忘记它。那不可能吗？安装实例后是否需要修改实例？每次我想用的时候包装组件看起来都很乱…哦，等等。。。我误解了。您正在创建一个新类，该类在装入时重写其“内部类”的方法，是吗？那确实没那么凌乱。。。但是，我还是希望直接修改这个类。你知道这是否可能和/或如何做到吗？你是否计划覆盖他们所有的类？我希望不是。使用我的解决方案，一些黑客是可以的，但是如果你改变很多，我建议使用fork。顺便说一下，您也可以为这几个组件编写简单的引导HTML：）不，我插入了几个修复程序，仅此而已。我现在正在使用这个黑客，但是我在一些参考资料上遇到了麻烦。。。我真的不知道引导react文件是如何生成/工作的，但是有一些引用我无法从我的“修复”文件中获得，比如“classSet”（似乎是从“utils/classSet”导入的（？）。有解决方法吗？是否使用browserify的require（）？然后尝试：

var classSet=require（'react-bootstrap/utils/classSet'）否则只需复制该小文件：