使用 React 的多个数据馈送

Question

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

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

Answer 1

你需要两件事

1. 一个状态变量（比如 selected_category）来存储您点击的类别和
2. 一个回调函数（比如 handleChange），用于在您单击某个类别时更改该状态。

现在 SubCategoryList 将仅显示那些将其父项作为所选类别的项目。 https://jsfiddle.net/69z2wepo/30587/

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