1

同じタイプの親/子コンポーネントを見つけることができるコンポーネントを用意しようとしています。これらのコンポーネントは、プログラムによって「再現可能」である必要もあります。

そのような：

<MyComponent id="1>
 <div>
  <MyComponent id="2">
   <div>
    <MyComponent id="3"></MyComponent>
   </div>
   <div>
    <MyComponent id="4"></MyComponent>
   </div>
  </MyComponent>
 </div>
</MyComponent>

基本的に必要なのは、MyComponents のツリーを走査する方法です (走査は論理的に制御されます)。

コントロール/パラメーターを親コンポーネントに渡すか、親コンポーネントから事前定義された順序で (データに基づいて) コントロール/パラメーターを子コンポーネントに渡すことができます。これを行うには 2 つの方法がありますが、どちらもプリプロセッサが必要です。1 つは、見つかった MyComponent ごとに新しい Component を生成するプリプロセッサで、いくつかのボイラープレートがあります。何かのようなもの：

var MyComponent_1 = React.createClass({
  initialState: function(){ return {currentObject: 0} },
  parentCallback: function(x){ /* traversal logic */ },
  render: function(){
    var nodes=[];
    for(var i=0;i<RepeatParam;i++) nodes.push((<div><MyComponent_2 parent={parent}></MyComponent_2></div>));
    return nodes; 
  }
});

var MyComponent_2 /** just like the above */

もう 1 つの方法は、次のような関数クロージャを追加することでした。

var $parent=0, parent=0;
<div>
(function(){parent=$parent;$parent=1;
return (<MyComponent parent={parent}>
<div>
(function(){parent=$parent;$parent=2;
<MyComponent parent={parent}></MyComponent>
})()
</div></MyComponent>}))()</div>

さらに別の方法は、グローバル変数を使用して createClass に注入することでした。

これらの方法はすべて間違っているように見え、React がどのように機能するかについて非常に大きな誤解をしているようです。コンポーネントのツリーをトラバースできるようにするためのよりエレガントな方法はありますか?また、私がコミットしているアンチパターンは何ですか? どうすればいいですか？

4

1 に答える 1

0

これは、「コンテキスト」API を使用して実行できるようになりました。

export class Hierarchy {
  contextTypes: {
     level: React.PropTypes.number
  }

  childContextTypes: {
    level: React.PropTypes.number
  }

  getChildContext() {
    return {
      level: this.context.level + 1
    };
  }

  render() {
    return <div>{this.context.level}{this.children}</div>;
  }
}

高次のコンポーネント、コンテキスト、および Flux の組み合わせにより、実装が容易になります。

于 2015-04-27T19:43:24.770 に答える