0

更新私のアプローチ全体が間違っていることが判明しました。受け入れられた回答が示唆するように、良い出発点は、React + Flux で構築され、GitHub でホストされているTodoMVCアプリです。

学習目的で非常に小さな React + Flux アプリを構築しています。現時点では、ログイン フォームとコンテンツ (実際にはユーザー名を表示するだけ) のみで構成されています。アプリケーション コンポーネントをアプリ内の唯一のステートフル コンポーネントとして使用し、その状態を小道具として子に送信することを計画しています。しかし、アプリケーションの状態を子 (私の場合は入力フォーム) から更新するためのベスト プラクティスは何かわかりません。おそらく階層に沿ってバブルアップできると思いますが、実際には悪い習慣のようです。また、ログインしたユーザー名をストアに保存する必要がありますか?

これが私が意味することの基本的な例です：

var LoginForm = React.createClass({
    _onSubmit : function(e) {
        e.preventDefault();

        var username = this.refs.username.getDOMNode().value.trim();

        if(!username) return;

        alert(username);

        this.refs.username.getDOMNode().value = "";

        return
    },

    render : function() {
        return (
            <div>
                <form onSubmit={this._onSubmit}>
                    <input
                        type="text"
                        placeholder="Insert username"
                        ref="username"
                    />
                    <button type="submit">Login</button>
                </form>
            </div>
        );
    }
});

var Header = React.createClass({
    render : function() {
        return (
            <div className="header">
                <LoginForm />
            </div>
        );
    }
});

var Content = React.createClass({
    render : function() {
        return (
            <div className="content">Welcome, [username]</div>
        );
    }
});

var MyApp = React.createClass({
    render : function() {
        return (
            <div>
                <Header />
                <Content />
            </div>
        );
    }
});

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

この例では、ここでJSFiddle を設定しました。私の目標は、[username] を警告された文字列に置き換えることです。

4

1 に答える 1

0

申し訳ありませんが、コードにフラックスのアーキテクチャがまだ表示されていません:)フラックスの3つの基本構造、つまりaction、、、dispatcherおよびstore.

inコンポーネントでは、 をトリガーし_onSubmitてログインを実行する必要があります。その後、イベントはを通過して に渡されます。LoginFormactiondispatcherstore

から、storeログインを実行し (ここで[username]情報を保存します)、イベントをトリガーします (例: change)。Contentこのイベントは、 のコンポーネントによって登録され、リッスンされますcomponentDidMount。イベントを聞くと、ストアから情報changeを取得できるはずです。usernameこれはフラックスの良い例です

于 2015-01-04T03:00:53.003 に答える