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

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

类组件内部的功能组件

1 个答案: