类组件内的功能组件

IT技术 javascript reactjs components this react-props
2021-05-14 05:29:49

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

例子:

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

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

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

1个回答

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

使用MySubComponentasMyComponent方法可能只有两个好处

其中之一是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} />
        )
    }
}