1

React Router を試しています。私の質問を説明するための単純化された例(投稿の下部):

ビュー1

var View1 = React.createClass({
  statics: {
     headerAction: function() {
        this.handleSomething();
     }
  },

  handleSomething: function() {
     this.setState(...);
  },

  render: function () {
    return (
      <div>
        (...)
      </div>
    );
  }
});

View2 の類似クラス

アプリ

var App = React.createClass({
  render: function () {
    return (
      <div>
        <AppHeader />

        <RouteHandler/>
      </div>
    );
  }
});

ルーター

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="view2" handler={View2}/>
    <DefaultRoute handler={View1}/>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

ヘッダー/ツールバーは常に表示されるため、AppHeader を (個々のビューではなく) App クラスに配置したいと考えています。ビュークラスの一部である場合、ルーターが別のビューを開くたびにヘッダーが再マウントされます。ただし、そのコンポーネントの小道具は、アクティブなルートに基づいて異なる場合があります。別のタイトルのように、ビューで何か (状態の変化) を引き起こすクリック可能なアクションを持つアイコン。

これを解決する良い方法を見つけようとしました。つまり、どのビュー クラスがアクティブなルート ハンドラーであるかに基づいて、AppHeader のさまざまな小道具を意味します。ビュークラスは変化するコンポーネントなので、小道具がそのコンポーネントで使用されなくても、ビューコンポーネント（上記の例ではView1 / View2）に含めることを考えました。私はそれをこれらのコンポーネントの静的として見てから、それらをRouter.runで抽出しました。その問題は、ヘッダーのクリック可能なリンクのように、同じコンポーネントでイベントハンドラーを呼び出すことができないことです(View1の例のように)ビューで何かをする。

逆流ストアを作成しようとしましたが、ビュー コンポーネントの componentWillUpdate で、アプリ コンポーネントでリッスンされ、小道具としてヘッダーに送信されるストアで何らかのアクションを呼び出します。ただし、最初のレンダリングでは、アプリ コンポーネントのレンダリング プロセス中にそのアクションが呼び出されるため、最初のヘッダー プロパティはまだ使用できないため表示されません。

私が考えたもう 1 つのアプローチは、ビューごと (ルーター ハンドラーごと) に 1 つの Reflux ストアを持ち、個々のストアにヘッダーの小道具を持ち、それらを App コンポーネントのヘッダーに渡すことでした。しかし、どのルートがアクティブであるかに基づいて、使用する店舗を切り替える必要があります。React Router でストアを選択する以外に、ハンドラーごとに個別のストアを作成する方法が見つかりませんでした。

このような場合、他にどのような選択肢がありますか?

4

1 に答える 1

0

これが役立つかどうかはわかりませんが、<Link>fromを使用して同様の問題を解決しましたreact-router。

render(){
  let to_obj={pathname:category.url, query:{text:category.text}}
  <Link to={to_obj} className="cat-link">
  .....

次に、目的地で、ReactiveVar を介して navbar のタイトルを更新します。

GlobalState.title.set(this.props.location.query.text)

試したことはありませんが、関数/ハンドラーを渡すことさえできるかもしれません。

ちょっとした考え。

于 2017-07-14T22:38:34.457 に答える