1

私は React を使用しており、React-Bootstrap コンポーネントを使用しています。

react-bootstrap.js ファイルを編集して「修正」(または「回避」) した React-Bootstrap ライブラリのいくつかの問題を見つけました。問題は、明日、react-bootstrap の新しいバージョンがリリースされた場合、react-bootstrap.js ファイルに記述したすべてのコードを新しいバージョンにコピーして貼り付ける/書き直す必要があることです。私はこれをしたくないので、react-bootstrap.jsファイルに触れずに、react-bootstrapが提供するコンポーネントクラスを変更する（つまり、レンダリング関数を変更する）方法があるかどうかをさまよっています。問題は、これを行う方法がわからないことです。少なくとも、コンポーネント クラスの内部動作を簡単に理解できないことです。どうすればこれを達成できるかについてのアイデアはありますか?

前もって感謝します！

4

1 に答える 1

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 をフォークするのが正しい解決策であることに同意します。

于 2014-09-21T12:10:02.577 に答える