javascript – 类组件内的功能组件

目前我有一个类组件,其中包含充当JSX组件的函数.

例：

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

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

以这种方式调用组件会有什么影响吗？还有一个术语吗？

解决方法:

这导致为每个MyComponent实例创建新的MySubComponent函数,这不是非常有效的方法.

将MySubComponent作为MyComponent方法可能只有两个好处.

其中之一是MySubComponent可以替换为MyComponent子类中的另一个实现,而无需修改render函数.这不是React惯用的,因为它促进了功能方法而不是OOP.

另一个是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} />
        )
    }
}

标签：javascript,reactjs,components,this,react-props
来源： https://codeday.me/bug/20190827/1745650.html