Question

首先，我是React JS的新手。所以我正在写这个问题。我这样做了三天。我要做的是，列出一个类别列表，如 -

Category1
->Sub-Category1
->Sub-Category2
Categroy2
Category3
.
.
.
CategoryN

我有这个json数据来制作列表

[
    {
    "Id":1,
    "Name":"Category1",
    "ParentId":0,   
    },
    {
    "Id":5,
    "Name":"Sub-Category1",
    "ParentId":1,   
    },
    {
    "Id":23,
    "Name":"Sub-Category2",
    "ParentId":1,   
    },
    {
    "Id":50,
    "Name":"Category2",
    "ParentId":0,   
    },
    {
    "Id":54,
    "Name":"Category3",
    "ParentId":0,   
    },
]

我尝试了很多开源示例，但他们的json数据格式与我的不同。所以这对我没用。我已经构建了一些东西，但这不像我预期的结果。这是我的jsfiddle链接我做了什么。 https://jsfiddle.net/mrahman_cse/6wwan1fn/

注意：每个子类别都属于依赖于“ParentId”的类别，如果任何一个具有“ParentId”：0则它实际上是一个类别，而不是子类别。请参阅JSON

提前致谢。

Answer 1

您可以使用此代码jsfiddle

此示例允许添加新的嵌套类别，并进行嵌套搜索。

带注释的

代码：

var SearchExample = React.createClass({
    getInitialState: function() {
        return {
            searchString: ''
        };
    },
    handleChange: function(e) {
        this.setState({
            searchString: e.target.value.trim().toLowerCase()
        });
    },
    isMatch(e,searchString){
        return e.Name.toLowerCase().match(searchString)
    },
    nestingSerch(e,searchString){
        //recursive searching nesting
        return this.isMatch(e,searchString) || (e.subcats.length && e.subcats.some(e=>this.nestingSerch(e,searchString)));
    },
    renderCat(cat){
        //recursive rendering
        return (
            <li key={cat.Id}> {cat.Name}
                {(cat.subcats && cat.subcats.length) ? <ul>{cat.subcats.map(this.renderCat)}</ul>:""}
            </li>);
    },
    render() {
        let {items} = this.props;
        let {searchString} = this.state;
         //filtering cattegories
        if (searchString.length) {
            items = items.filter(e=>this.nestingSerch(e,searchString))
            console.log(items);
        };
        //nesting, adding to cattegories their subcatigories
        items.forEach(e=>e.subcats=items.filter(el=>el.ParentId==e.Id));
        //filter root categories
        items=items.filter(e=>e.ParentId==0);
        //filter root categories
        return (
            <div>
                <input onChange={this.handleChange} placeholder="Type here" type="text" value={this.state.searchString}/>
                <ul>{items.map(this.renderCat)}</ul>
            </div>
        );
    }
});

使用React JS从JSON数据创建树视图

1 个答案: