Question

我刚刚开始学习ReactJS，遇到了我无法解决的问题。

我正在为电视节目创建一个基本应用程序。我有一个演出的每个季节的引导选项卡，并且在此选项卡中，我想列出所选季节的所有情节。问题是我必须在一个循环中创建选项卡，在这个循环中，我应该为这些情节创建另一个循环。

我正在尝试做这样的事情：

EpisodeCards(props) {
    return (
        <div>
            This should contain the details of the episodes
        </div>
    )
}

SeasonTabs(props) {
    console.log('Seasons: ', props.seasons)
    let tabs = [];
    let episodes = [];
    let currentSeason = 1;
    let id;
    let aria;
    for(let season of props.seasons) {
        episodes = [];
        id="nav-season" + currentSeason;
        aria = "nav-season" + currentSeason + "-tab";
        tabs.push(<div className="tab-pane fade" id={id} role="tabpanel" aria-labelledby={aria}><this.EpisodeCards episodes={season}></this.EpisodeCards></div>);

        currentSeason++;
    }
    return (
        <div className="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
           {tabs}
        </div>
    )
}

为此，我遇到以下错误：

Unhandled Rejection (TypeError): Cannot read property 'EpisodeCards' of undefined

该如何以“反应方式”完成？预先感谢。

Answer 1

更改

SeasonTabs(props)

到

SeasonTabs = (props) =>

您想使用this访问类属性，但是默认情况下，它没有通过使用箭头() =>（新的ES6语法）创建函数而绑定到函数（仅ES5），它会自动绑定{{ 1}}。

例如：

this

Answer 2

React.js与组件有关，一切与组件有关。如果某个函数返回了react元素或Custom元素，那么它就是一个组件。

您正在在类组件内部创建一个功能组件，尽管这种方法可能有效，但这不是制造组件的适当方法。

最好使用组合，您的代码将更清晰，更容易阅读，更好的可维护性，您可以在其他组件中使用组件组件。

我的解决方案：

function EpisodeCards(props) {
    return (
        <div>
            This should contain the details of the episodes
        </div>
    )
}



SeasonTabs(props) {
    console.log('Seasons: ', props.seasons)
    let tabs = [];
    let episodes = [];
    let currentSeason = 1;
    let id;
    let aria;
    for(let season of props.seasons) {
        episodes = [];
        id="nav-season" + currentSeason;
        aria = "nav-season" + currentSeason + "-tab";
        //There is no need for this keyword
        tabs.push(<div className="tab-pane fade" id={id} role="tabpanel" aria-labelledby={aria}><EpisodeCards episodes={season}/></div>);

        currentSeason++;
    }
    return (
        <div className="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
           {tabs}
        </div>
    )
}

ReactJS-在自定义元素中嵌入自定义元素

2 个答案: