Функциональные компоненты внутри компонентов класса - PullRequest
Новая
       12

Функциональные компоненты внутри компонентов класса

0 голосов
/ 06 декабря 2018

В настоящее время у меня есть компонент класса, который содержит функции, которые действуют как компоненты в моем JSX.

Пример: 

class MyComponent extends React.Component {
    MySubComponent = (props) => {
        if (props.display) {
            return <p>This text is displayed</p>
        }
    }

    render() {
        return (
            <this.MySubComponent display={true} />
        )
    }
}

Есть ли какие-либо последствия для вызова компонентов таким образом?Также есть термин для этого?

1 Ответ

0 голосов
/ 06 декабря 2018

Это приводит к созданию новой функции MySubComponent для каждого экземпляра MyComponent, что является не очень эффективным способом сделать это.

Может быть только два преимущества использования MySubComponent как MyComponentmethod.

Одним из них является то, что MySubComponent можно заменить другой реализацией в подклассе MyComponent без изменения функции render.Это не идиоматично для React, потому что он продвигает функциональный подход вместо ООП.

Другое - то, что MySubComponent может получить доступ к MyComponent экземпляру и его свойствам.Это приводит к проблеме проектирования, потому что два компонента тесно связаны между собой.

Ни один из этих аргументов не является существенным в разработке React.Если нет особых потребностей, требующих, чтобы MySubComponent был частью MyComponent, первый не должен определяться как метод экземпляра второго.Это может быть просто: 

const MySubComponent = (props) => {
    if (props.display) {
        return <p>This text is displayed</p>
    }
}

class MyComponent extends React.Component {
    render() {
        return (
            <MySubComponent display={true} />
        )
    }
}
...