Reactjs 可以获取不同组件的父组件

我有一个组件，必须得到不同的不断变化的组件

例如，一次-需要包含一个组件，第二次是a，第三次是a

如何制作此组件以获得不同的组件

组成部分：

import React from "react";
import { css } from "emotion";
import colors from '../../styles/colors';
import PanelHeader from "./PanelHeader";

export default function Panel({ active, panelHeader}) {
    const styles = css({
        borderRadius: 4,
        backgroundColor: "white",
        border: `1px solid ${ active ? colors.blue : colors.grayLight }`,
        width: 540,
        padding: 32,

    });
    return (
        <div className={styles}>
            {panelHeader && <PanelHeader headerType={panelHeader} />}
        </div>
    );
}

小组的故事：

import React from "react";
import { storiesOf } from "@storybook/react";

import Panel from "../components/Panel";
import colors from '../styles/colors';

import PanelHeader from "../components/Panel/PanelHeader";

storiesOf("Panel", module)
    .add("Default", () => (
        <Panel></Panel>
    ))
    .add("Active", () => (
        <Panel active></Panel>
    ))

storiesOf("Panel/PanelHeader", module)
    .add("Default", () => (
        <PanelHeader headerType="Identity document" color={colors.gray}>1</PanelHeader>
    ))
    .add("Active", () => (
        <PanelHeader headerType="Identity document" color={colors.blue}>1</PanelHeader>
    ))

可以将面板更改为接受子道具，将其传递到渲染的位置，并传入相应的组件

例如：

// PropType for children is `PropTypes.node`
export default function Panel({ active, panelHeader, children}) {
    // ...
    return (
        <div className={styles}>
            {children}
        </div>
    );
}

// ...

<Panel><Dropdown /></Panel>

// or

<Panel><TextInput /></Panel>

或者，您可以传入一个组件类/函数，并在其中进行渲染：

export default function Panel({ active, panelHeader, ChildComponent}) {
    // ...
    return (
        <div className={styles}>
            {/* This is like any other component, 
                you can pass in props as usual. */}
            {/* It's important for the name to start with an uppercase letter, 
                otherwise the JSX compiler will turn this in a string! */}
            <ChildComponent />
        </div>
    );
}

// ...

<Panel ChildComponent={Dropdown}></Panel>

// or

<Panel ChildComponent={TextInput}></Panel>

---

这种模式称为组件组合。您可以在React docs中阅读更多内容：

很好，感谢您提供了详细的解释，第二个选项更推荐/专业吗？@user3378165第一个选项更简单、更易于使用，并且更易于理解代码。第二种方法更灵活，因为它允许您传递自定义组件进行渲染，但它通常会使代码更加复杂。它们不是完全可以互换的，这取决于你想如何使用它。我通常尽量使用第一种方法，因为我总是努力编写可理解的代码。如果这种方法不可行，我会使用第二种方法。