类组件中的功能组件

Question

目前我有一个类组件，其中包含在我的 JSX 中充当组件的函数。

例子：

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

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

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

Answer 1

这会导致为每个 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} />
        )
    }
}