web-dev-qa-db-ja.com

クラスコンポーネント内の機能コンポーネント

現在、私はJSXのコンポーネントとして機能する関数を含むクラスコンポーネントを持っています。

例：

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

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

この方法でコンポーネントを呼び出すことへの影響はありますか？これには用語がありますか？

javascriptreactjscomponentsthisreact-props
3
CodingMadeEasy

その結果、MySubComponentインスタンスごとに新しいMyComponent関数が作成されますが、これは非常に効率的な方法ではありません。

MySubComponentをMyComponentメソッドとして使用する利点は2つしかない場合があります。

それらの1つは、MySubComponent関数を変更せずに、MyComponentをrenderサブクラスの別の実装に置き換えることができることです。 Reactに慣用的ではありません。OOPではなく機能的アプローチを促進するためです。

もう1つは、MySubComponentがMyComponentインスタンスとそのプロパティにアクセスできることです。 2つのコンポーネントが密結合しているため、設計上の問題が発生します。

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