web-dev-qa-db-ja.com

reactjsのツリーコンポーネントの状態を管理する方法

私はこれを数日間苦労して、それを行うための「反応する」方法を見つけようとしています。

基本的に、ツリー、任意にネストできる（リストの...）リストのリストがあり、これを表示し、再配置も可能にするコンポーネントが必要です。

これが私のデータです：

var data = [{
      id: 1
    }, {
      id: 2, children: [
        {
          id: 3, children: [{id: 6}]
        }, {
          id: 4
        }, {
          id: 5
        }]
    }]

私の最初のパスは、レンダリング関数でDOM要素のネストされたリストを構築する単一の「ツリー」コンポーネントを持つことでした（ ここのコードを見てください ）。これは実際には少数の要素ではかなりうまく機能しましたが、数百の要素をサポートできるようにしたいので、要素をツリー内で移動すると非常に高い再レンダリングコストが発生しました（数百の場合は約600ミリ秒）要素）。

したがって、ツリーの各「ノード」は、このコンポーネントの独自のインスタンスであると思います。しかしこれが私の質問です（長いイントロでごめんなさい）：

各ノードは、中央の「データベース」から子のIDのリストを動的に照会し、それを状態に格納する必要がありますか？または、最上位のノードがツリー全体をロードし、すべてを小道具に渡す必要がありますか？

私はまだ、州と小道具がどのように扱われ、分割されるべきかについて頭を悩ませようとしています。

ありがとう

javascripttreereactjs
16
Jared Forsyth

Reactでツリー構造を試してみたかったので、<h5>をクリックするとサブツリーを非表示にする単純なコンポーネントを思いつきました。すべてがTreeNodeです。これはあなたが考えていたものと似ていますか？

このJSFiddleで実際の動作を確認できます： http://jsfiddle.net/ssorallen/XX8mw/

TreeNode.jsx：

var TreeNode = React.createClass({
  getInitialState: function() {
    return {
      visible: true
    };
  },
  render: function() {
    var childNodes;
    if (this.props.node.childNodes != null) {
      childNodes = this.props.node.childNodes.map(function(node, index) {
        return <li key={index}><TreeNode node={node} /></li>
      });
    }

    var style = {};
    if (!this.state.visible) {
      style.display = "none";
    }

    return (
      <div>
        <h5 onClick={this.toggle}>
          {this.props.node.title}
        </h5>
        <ul style={style}>
          {childNodes}
        </ul>
      </div>
    );
  },
  toggle: function() {
    this.setState({visible: !this.state.visible});
  }
});

bootstrap.jsx：

var tree = {
  title: "howdy",
  childNodes: [
    {title: "bobby"},
    {title: "suzie", childNodes: [
      {title: "puppy", childNodes: [
        {title: "dog house"}
      ]},
      {title: "cherry tree"}
    ]}
  ]
};

React.render(
  <TreeNode node={tree} />,
  document.getElementById("tree")
);
26
Ross Allen

個々の挿入/削除を管理する手間を省くことができるので、すべてを小道具として渡す方が良いようです。また、コメントが述べたように、key属性は、不必要な再レンダリングの巨大なチャンクを防ぎます。

このリンクを確認することをお勧めします： http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html 。それはあなたが抱えているジレンマの種類とそれに取り組む方法を説明しています。

（偶然にも、私はしばらく前に反応ツリービューを作成しました： https://github.com/chenglou/react-treeview 。それ！）

5
chenglou