ReactJS - встраивание пользовательского элемента в пользовательский элемент

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

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

Answer 2

Изменить

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