1

reactで選択可能なオブジェクトの一覧を表示したい。いくつかの要素を所有するいくつかのグループを所有するリスト コンポーネントがあります。明らかに、リスト データ自体はストアに格納する必要がありますが、UI の状態 (たとえば、どの要素が選択されているか) はどうでしょうか。表向きはルート リスト要素のプロパティですが、それを要素に渡すには、チェーンに沿った各要素 (この場合は 1 つだけ - グループ) は、気にしなくてもそれを渡す必要があります。それ。また、別のプロパティを追加したい場合は、かなり冗長にチェーンに渡す必要があります。

また、カプセル化。異なるデータで複数回インスタンス化される可能性のあるコンポーネントを作成するにはどうすればよいですか?

他の言語では、リスト ポインターをチェーンに渡すだけで、子要素がそこから必要なものを何でも取得できるため、すべてがカプセル化されたままになります。流動的な方法は、ストアを子要素に渡すことでしょうか? UI 状態と永続データ用に別のストアを用意しますか?

4

1 に答える 1

2

これをボトムアップで設計しましょう。そのため、下部に ListItem があります。

リスト項目をレンダリングするために何が必要ですか? タイトル、本文、および選択されているかどうかを考えてみましょう。

また、リスト項目を意味するイベントは何ですか? おそらくonClickだけです。

状態はありますか？いいえ、ホバーされている、または ListItem に固有のその他の状態などを処理する必要がある場合を除きますが、その親には関係ありません。

var ListItem = React.createClass({
  render(){
    var classNames = ["list-item"];

    if (this.props.selected) classNames.push("selected");

    return (
      <li className={classNames.join} onClick={this.props.onClick}>
        <div className="title">{this.props.title}</div>
        <div className="body">{this.props.body}</div>
      </li>
    );
  }
});

ListGroup は少しわかりにくいです。

props については、アイテムのリスト、選択されたインデックス (存在する場合)、および で呼び出される onSelectionChange コールバックを要求します(nextIndex, lastIndex)。

このコンポーネントにも状態はありません。追加のポイントとして、カスタム レンダラーを指定できるようにすることで、これをより再利用しやすくします。renderer={component}上記の ListItem インターフェイスを実装するコンポーネントがどこにあるかを渡すことができます。

var ListGroup = React.createClass({
  getDefaultProps: function(){
    return {renderer: ListItem, onSelectionChange: function(){}}
  },
  render(){
    return (
      <div>{this.props.items.map(this.renderItem)}</div>
    );  
  },
  renderItem(data, index){
    var selectedIndex = this.props.selectedIndex;
    return (
      <this.props.renderer 
        selected={selectedIndex === index}
        key={i}
        onClick={() => this.props.onSelectionChange(index, selectedIndex)}
        {...data} />
  }
});

そして、次のように ListGroup をレンダリングできます。

<ListGroup 
  items={[{title: "foo", body: "bar"}, {title: "baz", body: "quux"]}
  selectedIndex={this.state.i}
  onSelectionChange={(index) => this.setState({i: index})} />

データはツリーを下って渡されますが、各コンポーネントをレンダリングするために必要なデータの本質のみです。ListItem は、項目の完全なリストも、選択されたインデックスも必要としません。複数の選択が許可されているか、1 つだけが許可されているかは問題ではありません。それが知っているのは、this.props.selectedが真実である場合に選択され、それ以外の場合は選択されないということだけです。

于 2015-01-16T07:42:34.913 に答える