1

私は現在、最初の React プロジェクトに取り組んでおり、コンポーネント間でデータを渡す際に問題が発生しました。リストで選択したアイテムに応じて異なる日のスタイルを設定するために、このライブラリ カレンダー ウィジェットを使用しています。

https://github.com/vazco/meteor-universe-react-widgets

この構造のツリー内にある 4 つの相互作用するコンポーネントがあります。

-----A-----
|         |
C         B
|
|
D

現在、選択した項目のデータを最上位コンポーネント (コンポーネント A) からリスト (コンポーネント B) に保存しています。データを渡したいコンポーネントはコンポーネント D です。私がやりたいのは、状態を作成し、値を C に渡し、次に D に渡すことです。残念ながら、C はライブラリのカレンダー コンポーネントであり、実際には操作できません。

B での選択によって生成されたオブジェクトが、C を操作できずに D によってアクセスされる必要があるため、子コンポーネントのヘッドを介して値を渡す方法はありますか?

コード スニペット:

コンポーネント C (カレンダー) が A で呼び出され、コンポーネント D (dayComponent) も渡される方法。

<Calendar dayComponent={DayComponent}/>;

カレンダー コンポーネントの宣言とインポート

System.import('{universe:react-widgets}').then(ReactWidgets => {

    Calendar = ReactWidgets.Calendar;
});

Day コンポーネントは、暦日のスタイルを返します。

 DayComponent = React.createClass({
  render() {
    var date = this.props.date
      , style = { backgroundColor: date < new Date() && '#F57B7B' }

    return (<div style={style}>
        {this.props.label}
      </div>);
  }
})
4

1 に答える 1

5

小道具ではありません。それはReactの仕組みではありません。React はプロップをトップダウン方向に送信し、親はプロパティを子に渡します。アイデアは、コンポーネントがレンダリングされた場所、またはコンポーネントに設定された小道具が有効である限り、何によってレンダリングされたかを気にするべきではないということです。

そうは言っても、子コンポーネントがツリーの上位からデータにアクセスできるようにするために、コンポーネントツリーに「穴を開ける」(いわば) ための機能があります。

ただし、コンテキストは一般に高度な機能と見なされており、別のソリューションが実行できない非常に特殊な状況でのみ使用されます。

ドキュメントページから：

注:コンテキストは、高度で実験的な機能です。API は、将来のリリースで変更される可能性があります。ほとんどのアプリケーションでは、コンテキストを使用する必要はありません。特に React を使い始めたばかりの場合は、おそらくコンテキストを使用したくないでしょう。コンテキストを使用すると、データ フローがわかりにくくなるため、コードが理解しにくくなります。これは、アプリケーションを介して状態を渡すためにグローバル変数を使用することに似ています。コンテキストを使用する必要がある場合は、控えめに使用してください。

アイデアは、最上位コンポーネントで、使用可能にする Context プロパティを定義し、次に Context データを返すメソッドを定義するというものです。

class TopComponent extends Component {
  childContextTypes: {
    color: React.PropTypes.string
  },
  getChildContext: function() {
    return {color: "purple"};
  },
  ..
}

そして、ツリーのどこかにある子コンポーネントで、そのコンポーネントにアクセスしたい Context プロパティを伝えます。

class ChildComponent extends Component {
  contextTypes: {
    color: React.PropTypes.string
  },
  ...
}

そして、それらのプロパティはプロパティを介してアクセスできthis.contextます（this.context.colorたとえば）。

于 2016-01-16T17:11:50.790 に答える