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

这样调用组件有什么影响吗？还有一个术语吗？

最佳答案

这将导致为每个MySubComponent实例创建新的MyComponent函数，但这并不是非常有效的方法。

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