类组件中的功能组件 [英] Functional Components inside class components

问题描述

Currently I have a class component that contains functions that act as components in my JSX.

Example:

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

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

Are there any repercussions to calling components this way? Also is there a term for this?

解决方案

This results in creating new MySubComponent function for each MyComponent instance, which is not very efficient way of doing this.

There may be only two benefits of having MySubComponent as MyComponent method.

One of them is that MySubComponent can be replaced with another implementation in MyComponent subclass without modifying render function. This isn't idiomatic to React because it promotes functional approach instead of OOP.

Another is that MySubComponent can access MyComponent instance and its properties. This results in design problem because two components are tightly coupled.

Neither of these arguments is substantial in React development. Unless there are specific needs that require MySubComponent to be a part of MyComponent, the former shouldn't be defined as instance method of the latter. It could be just:

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

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

这篇关于类组件中的功能组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！