如何在reactjs中管理树组件中的状态

我已经为此苦苦挣扎了几天,试图找出“反应”的方式。

基本上,我有一棵树,一个可以任意嵌套的列表列表(列表),我想要一个可以显示此内容并允许重新排列的组件。

这是我的数据:

var data = [{

id: 1

}, {

id: 2, children: [

{

id: 3, children: [{id: 6}]

}, {

id: 4

}, {

id: 5

}]

}]

我的第一步是只具有一个“树”组件,该组件在其render函数中构建DOM元素的嵌套列表(请参见此处的代码)。对于少数元素,这实际上效果很好,但是我希望能够支持数百个元素,并且当在树中移动元素时,重新渲染的成本非常高(当有数百个元素时,约为600毫秒)元素)。

因此,我认为我将拥有树的每个“节点”,因为它是该组件的自己的实例。但是,

每个节点是否应该从中央“数据库”动态查询列表的子代ID,并将其存储在状态中?还是最顶层的节点应该加载整棵树并通过道具传递所有内容?

我仍在努力思考如何处理和分散状态和道具。

谢谢

回答:

我想用React尝试树结构,并想出一个简单的组件,当您单击时可以隐藏子树<h5>。一切都是一个TreeNode。这与您的想法类似吗?

您可以在此JSFiddle中查看它的运行情况:http :

//jsfiddle.net/ssorallen/XX8mw/

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});

}

});

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")

);

以上是 如何在reactjs中管理树组件中的状态 的全部内容, 来源链接: utcz.com/qa/398286.html

回到顶部