Как я могу использовать компонент класса внутри компонента функции

Question

Мы можем использовать компонент функции внутри компонента класса, возможно ли сделать наоборот? Например

class MyClassComponent extends React.Component {
    render() {
        return (
            <p>This is a class component with display {this.props.display}</p>
        )
    }
}
const MyFunctionComponent = (props) => {
    return <MyClassComponent display=props.shouldDisplay>This is a function component</MyClassComponent >
}

Answer 1

React делает для вас прозрачным, являются ли используемые вами компоненты функциями или классами, поэтому вы можете составлять их по своему усмотрению.

В частности, в вашем коде есть две проблемы, которые вы, возможно, захотите пересмотреть:

1. Когда вы определяете реквизит, его значение должно быть заключено в фигурные скобки:

<MyClassComponent display={props.shouldDisplay}>

Компоненты могут быть либо самозакрывающимися, либо иметь подпорки для детей. В вашем случае вы добавили текст внутри открывающего тега и закрывающего тега, к которому вы можете получить доступ в MyClassComponent через this.props.children:

const ChildComponent = (props) => {
    return (
        <div>
            {this.props.children}
        </div>
    );
}

const ParentComponent = (props) => {
    return (
        <ChildComponent>
            Hello World
        </ChildComponent>
    );
}

const App = (props) => {
    return <ParentComponent/>;
}