Reactjs 具有React的多个数据源

我是新手。我只是在玩弄组件，我不确定我做错了什么。我有两个数据源，类别和子类别。我希望在一个DIV中呈现我的主要类别，然后我希望在它自己的DIV中的每个子类别都有可能的链接选择列表。最终，当您单击主类别时，它将显示子类别。现在我只是想让它正确地显示出来

var导航=React.createClass({
render:function（）{
返回(
);
}
});
var NavigationCategoryList=React.createClass({
渲染：函数（）{
var links=this.props.data.map（函数（类别）{
返回(
);
});
返回(
试验
{links}
);
}   
});
var NavigationSubCategoryList=React.createClass({
渲染：函数（）{
var sub=this.props.data.map（函数（子类别）{
返回(
);
});                     
返回(
{sub}
);
}
});
var NavigationSubCategoryLinks=React.createClass({
渲染：函数（）{
返回(
{this.props.name}链接
);
}
});     
var NavigationCategory=React.createClass({
渲染：函数（）{
返回(
);
}
});
变量类别=[
{“id”：1，“name”：“Home”，“link”：“#”}，
{“id”：2，“name”：“About”，“link”：“#”}，
{“id”：3，“name”：“Links”，“link”：“#”}，
{“id”：4，“name”：“Contact”，“link”：“#”}
];      
变量子类别=[
{“id”：1，“parent”：“Home”，“name”：“Home link 1”，“link”：“#”}，
{“id”：2，“parent”：“Home”，“name”：“Home link 2”，“link”：“#”}，
{“id”：3，“parent”：“Home”，“name”：“Home link 3”，“link”：“#”}，
{“id”：4，“parent”：“Home”，“name”：“Home link 4”，“link”：“#”}，
{“id”：5，“parent”：“About”，“name”：“About link 1”，“link”：“#”}，
{“id”：6，“parent”：“About”，“name”：“About link 2”，“link”：“#”}，
{“id”：7，“parent”：“About”，“name”：“About link 3”，“link”：“#”}，
{“id”：8，“parent”：“About”，“name”：“About link 4”，“link”：“#”}，
{“id”：9，“parent”：“links”，“name”：“links link 1”，“link”：“#”}，
{“id”：10，“parent”：“links”，“name”：“links link 2”，“link”：“#”}，
{“id”：11，“parent”：“links”，“name”：“links link 3”，“link”：“#”}，
{“id”：12，“家长”：“联系人”，“姓名”：“联系人链接1”，“链接”：“#”}
];          
ReactDOM.render(
,
document.getElementById（'示例'）
);

你需要两样东西

一个状态变量（比如selected_category），用于存储您单击的类别和

一个回调函数（比如handleChange），每当您单击一个类别时，它都会更改该状态

现在，SubCategory List将仅显示其父项作为选定类别的项目。

var导航=React.createClass({
getInitialState:函数（）{
返回{所选类别：'主页'}；
},
手变（e）{
this.setState（{selected_category:e.target.firstChild.data}）；
},
render:function（）{
返回(
);
}
});
var NavigationCategoryList=React.createClass({
渲染：函数（）{
var handleChange=this.props.handleChange；
var links=this.props.data.map（函数（类别）{
返回(
);
});
返回(
试验
{links}
);
}   
});
var NavigationSubCategoryList=React.createClass({
渲染：函数（）{
var selected=this.props.selected\u类别；
var sub=this.props.subData.map（函数（子类别）{
if（subcategory.parent==选中）
返回(
);
});                     
返回(
{sub}
);
}
});
var NavigationSubCategoryLinks=React.createClass({
渲染：函数（）{
返回(
{this.props.name}链接
);
}
});     
var NavigationCategory=React.createClass({
渲染：函数（）{
var handleChange=this.props.handleChange；
返回(
);
}
});
变量类别=[
{“id”：1，“name”：“Home”，“link”：“#”}，
{“id”：2，“name”：“About”，“link”：“#”}，
{“id”：3，“name”：“Links”，“link”：“#”}，
{“id”：4，“name”：“Contact”，“link”：“#”}
];      
变量子类别=[
{“id”：1，“parent”：“Home”，“name”：“Home link 1”，“link”：“#”}，
{“id”：2，“parent”：“Home”，“name”：“Home link 2”，“link”：“#”}，
{“id”：3，“parent”：“Home”，“name”：“Home link 3”，“link”：“#”}，
{“id”：4，“parent”：“Home”，“name”：“Home link 4”，“link”：“#”}，
{“id”：5，“parent”：“About”，“name”：“About link 1”，“link”：“#”}，
{“id”：6，“parent”：“About”，“name”：“About link 2”，“link”：“#”}，
{“id”：7，“parent”：“About”，“name”：“About link 3”，“link”：“#”}，
{“id”：8，“parent”：“About”，“name”：“About link 4”，“link”：“#”}，
{“id”：9，“parent”：“links”，“name”：“links link 1”，“link”：“#”}，
{“id”：10，“parent”：“links”，“name”：“links link 2”，“link”：“#”}
                var Navigation = React.createClass({
        render: function() {
            return (
                <div className="navigation">
                    <NavigationCategoryList data={this.props.category} />
                    <NavigationSubCategoryList data={this.props.category} subData={this.props.subCategory} />
                </div>
            );
        }
    });

    var NavigationCategoryList = React.createClass({
        render: function () {
            var links = this.props.data.map(function(category) {
                return (
                    <NavigationCategory name={category.name} link={category.link} />
                );
            });
            return (
                <div>
                    <div id="logo">Test</div>
                    <div className="navigationCategory">
                        {links}
                    </div>
                </div>
            );
        }   
    });

    var NavigationSubCategoryList = React.createClass({
        render: function () {
            var sub = this.props.data.map(function(subcategory) {
                return (
                    <NavigationSubCategoryLinks name={subcategory.name} link={subcategory.link} subCategory={subCategory}  />
                );
            });                     
            return (
                <div className="subCategoryContainer">
                    {sub}
                </div>
            );
        }
    });

    var NavigationSubCategoryLinks = React.createClass({
        render: function () {
            return (
                <div className="navigationSubCategory" id={this.props.name}>
                {this.props.name} links
                </div>
            );
        }
    });     

    var NavigationCategory = React.createClass({
        render: function () {
            return (
                <div className="navigationLink">
                    <a href={this.props.link}>{this.props.name}</a>
                </div>
            );
        }
    });



    var category = [
        {"id": 1, "name": "Home", "link": "#"},
        {"id": 2, "name": "About", "link": "#"},
        {"id": 3, "name": "Links", "link": "#"},
        {"id": 4, "name": "Contact", "link": "#"}
    ];      

    var subCategory = [
        {"id": 1, "parent": "Home", "name": "Home link 1", "link": "#"},
        {"id": 2, "parent": "Home", "name": "Home link 2", "link": "#"},
        {"id": 3, "parent": "Home", "name": "Home link 3", "link": "#"},
        {"id": 4, "parent": "Home", "name": "Home link 4", "link": "#"},
        {"id": 5, "parent": "About", "name": "About link 1", "link": "#"},
        {"id": 6, "parent": "About", "name": "About link 2", "link": "#"},
        {"id": 7, "parent": "About", "name": "About link 3", "link": "#"},
        {"id": 8, "parent": "About", "name": "About link 4", "link": "#"},
        {"id": 9, "parent": "links", "name": "links link 1", "link": "#"},
        {"id": 10, "parent": "links", "name": "links link 2", "link": "#"},
        {"id": 11, "parent": "links", "name": "links link 3", "link": "#"},
        {"id": 12, "parent": "Contact", "name": "Contact link 1", "link": "#"}
    ];          



    ReactDOM.render(
        <Navigation  category={category} subCategory={subCategory} />,
        document.getElementById('example')
    );

var Navigation = React.createClass({
            getInitialState: function() {
            return {selected_category: 'Home'};
        },
    handleChange(e){
        this.setState({selected_category: e.target.firstChild.data});
    },
    render: function() {
        return (
            <div className="navigation">
                <NavigationCategoryList data={this.props.category} handleChange={this.handleChange}/>
                <NavigationSubCategoryList data={this.props.category} subData={this.props.subCategory} selected_category={this.state.selected_category} />
            </div>
        );
    }
});

var NavigationCategoryList = React.createClass({
    render: function () {
            var handleChange = this.props.handleChange;
        var links = this.props.data.map(function(category) {
            return (
                <NavigationCategory name={category.name} link={category.link} handleChange={handleChange}/>
            );
        });
        return (
            <div>
                <div id="logo">Test</div>
                <div className="navigationCategory">
                    {links}
                </div>
            </div>
        );
    }   
});

var NavigationSubCategoryList = React.createClass({
    render: function () {
            var selected = this.props.selected_category;
        var sub = this.props.subData.map(function(subcategory) {
            if(subcategory.parent === selected)
            return (
                <NavigationSubCategoryLinks name={subcategory.name} link={subcategory.link} subCategory={subCategory}  />
            );
        });                     
        return (
            <div className="subCategoryContainer">
                {sub}
            </div>
        );
    }
});

var NavigationSubCategoryLinks = React.createClass({
    render: function () {
        return (
            <div className="navigationSubCategory" id={this.props.name}>
            {this.props.name} links
            </div>
        );
    }
});     

var NavigationCategory = React.createClass({
    render: function () {
            var handleChange = this.props.handleChange;
        return (
            <div className="navigationLink">
                <a href={this.props.link} onClick={handleChange}>{this.props.name}</a>
            </div>
        );
    }
});



var category = [
    {"id": 1, "name": "Home", "link": "#"},
    {"id": 2, "name": "About", "link": "#"},
    {"id": 3, "name": "Links", "link": "#"},
    {"id": 4, "name": "Contact", "link": "#"}
];      

var subCategory = [
    {"id": 1, "parent": "Home", "name": "Home link 1", "link": "#"},
    {"id": 2, "parent": "Home", "name": "Home link 2", "link": "#"},
    {"id": 3, "parent": "Home", "name": "Home link 3", "link": "#"},
    {"id": 4, "parent": "Home", "name": "Home link 4", "link": "#"},
    {"id": 5, "parent": "About", "name": "About link 1", "link": "#"},
    {"id": 6, "parent": "About", "name": "About link 2", "link": "#"},
    {"id": 7, "parent": "About", "name": "About link 3", "link": "#"},
    {"id": 8, "parent": "About", "name": "About link 4", "link": "#"},
    {"id": 9, "parent": "links", "name": "links link 1", "link": "#"},
    {"id": 10, "parent": "links", "name": "links link 2", "link": "#"},
    {"id": 11, "parent": "links", "name": "links link 3", "link": "#"},
    {"id": 12, "parent": "Contact", "name": "Contact link 1", "link": "#"}
];          



ReactDOM.render(
    <Navigation  category={category} subCategory={subCategory} />,
    document.getElementById('example')
);