javascript - React 组件类元编程

Question

我正在使用 React 并使用 React-Bootstrap 组件。

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

提前致谢！

Answer 1

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

    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-Bootstrap。