javascript - React - 包装父组件和直接子组件

Question

项目设置

我有一个用 create-react-app 创建的项目并且有antd (Ant Design) 安装和配置。

问题

考虑 <Steps>组件及其 <Steps.Step>来自 Ant Design 的子组件。

从官方文档来看，我们是这样渲染一个多步组件的:

<Steps>
    <Steps.Step />
    <Steps.Step />
    <Steps.Step />
</Steps>

注意:我发现包装 <Steps.Step>组件成单个<div>不管用。这些步骤不会显示在网页上。

<Steps>
    <div class="not-working">
        <Steps.Step />
        <Steps.Step />
        <Steps.Step />
    </div>
</Steps>

所以结构必须是<Steps.Step>作为 <Steps> 的直接子项的组件.

现在我想将这些组件中的每一个都包装成一个自定义的 React 组件，如下所示。

MySteps.js:

import "Steps" from "antd";

export default class MySteps extends Component {
    render() {
        return <Steps>{this.props.children}</Steps>
    }
}

MyStep.js:

import "Steps" from "antd";

export default class MyStep extends Component {
    render() {
        return <Steps.Step></Steps.Step>
    }
}

然后将上面的代码改写如下:

<MySteps>
    <MyStep />
    <MyStep />
    <MyStep />
</MySteps>

但是，结果是，React 生成了类似于以下内容的内容:

...
    <Steps>
        <MyStep>
            <Step></Step>
        </MyStep>
    </Steps>
...

问题

我该怎么做才能消除包装器，同时又能够重用和包装其他人编写的组件而不影响结果结构？

Answer 1

问题不在于您包装在组件中，而在于您没有将 Prop 传递给 Steps.Step。如果您将所有 Prop 传递给 Steps.Step inside MyStep 它将起作用。

import "Steps" from "antd";

export default class MyStep extends Component {
    render() {
        return <Steps.Step {...this.props} ></Steps.Step>
    }
}

这是工作代码和框:https://codesandbox.io/s/antd-reproduction-template-3ytn7