Question

项目设置

我有一个使用create-react-app创建的项目，并且已经安装并配置了antd（蚂蚁设计）。

问题

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

从官方文档中，我们以这种方式呈现了一个多步骤组件：

<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

问题不是您要包装组件，而是问题是您没有将道具传递给Steps.Step。如果将所有道具传递给Steps.MyStep内的Step，它将起作用。

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

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

项目设置

问题

问题

1 个答案: