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

【问题标题】：ReactJS - embedding custom element in a custom elementReactJS - 在自定义元素中嵌入自定义元素
【发布时间】：2019-05-08 00:30:09
【问题描述】：

刚开始学习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

如何以“反应方式”完成？提前致谢。

【问题讨论】：

两个函数都在同一个类中吗？
是的，在同一个 React.Component 中，
将 SeasonTabs(props) 更改为 SeasonTabs = (props) => 让我知道它是否有效
确实如此。哇。谢谢。你能告诉我这两个声明有什么区别吗？
@KendiBalazs 因为默认情况下 javascript 不绑定函数，这是 Javascript 行为没有反应，箭头函数没有这个关键字，这就是为什么 this 引用所有者类或组件.您可以使用组合，稍后在其他地方使用EpisodeCards 会更合适，如果您使用组合而不是嵌套组件，则在JSX 中不需要this 关键字。

标签： reactjs typescript frontend reactive-programming typeerror

【解决方案1】：

改变

SeasonTabs(props)

到

SeasonTabs = (props) =>

您想使用 this 访问类属性，但默认情况下，它不会绑定到函数（仅限 ES5），方法是使用箭头 () =>（新 ES6 语法）创建函数，它会自动将 this 绑定到函数.

例如：

class Test extends Component{
    constructor(props){
        this.testFn= this.testFn.bind(this);
    }

    testFn(){
        console.log(this); //will output
    }
    testFn2(){
        console.log(this); // undefined
    }
    testFn3 = () =>{
        console.log(this); //will output
    }
}

【讨论】：

【解决方案2】：

Reactjs 是关于组件，一切都是组件。如果一个函数返回一个反应元素或自定义元素，那么它就是一个组件。

您正在在类组件中创建一个功能组件，虽然这种方法可能有效，但这不是制作组件的合适方法。

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

我的解决方案：

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

【讨论】：