关于拓展外部antd-mobile组件作为自定义组件

[begoat]

想在自定义组件里面添加通用组件，发现了antd-mobile这个库

然后参考 这里webpack2.X 的 配置样例，了解到您是通过run-react集成webpack配置，所以下载并修改了 run-react src里面的dev.config配置文件 https://github.com/ant-design/ant-design-mobile/issues/516#issuecomment-293632772

先编译run-react然后在修改了 Gaea-editor 项目里面的 关于 run-react指定成了本地文件，然后试了很多种配置方法，一直编译的时候报错。

后来换了一种方法，新建了一个项目去先配置好webpack导入antd-mobile，然后在通过把gaea编辑器也作为一个module,import 进来配置它的componentClasses，然后还是出了一些问题。

在这里想问个 思 路，我该怎么引入呢？ 或者怎么修改外部组件的配置呢？

[ascoders]

@begoat run-react 只是用来跑这个项目 demo 的，所以不要去修改它的配置。gaea-editor 是一个组件，真正用法是 npm i gaea-editor 然后在项目中使用它：

import Editor from "gaea-editor"

ReactDOM.render(
    <Editor />,
    document.getElementById("react-root")
)

你可以把 antd-mobile 的组件包装一层，所有 props 都透传，再定义 gaeaSetting 字段在 defaultProps 就可以了。这里是内置组件的配置，可以参考：https://github.com/ascoders/gaea-basic-components/blob/master/src/text/text.type.ts#L2

[begoat]

谢谢，折腾了webpack 蛮长时间终于配好了环境，现在是typescipt的 antd-mobile项目 然后饮用 Gaea成功了。

但是遇到一个新的问题，希望能得到一些帮助：

在 gaea-editor 这个项目中参考 上述的配置 改写了内置的 Icons 和 Text组件，并且在 componentClasses 这个参数去调，可以作为自定义组件去用。

Test.component.tsx

import * as React from "react"
import * as ReactDOM from "react-dom"
import { Props, State } from "./Text.type"

export default class Text extends React.Component<Props, State> {
    public static defaultProps = new Props()
    public state = new State()

    public render() {
        return (
            <p style={this.props.style}>
                {this.props.text}
            </p>
        )
    }
}

Text.type.ts

export class Props {
    public gaeaSetting = {
        key: "gaea-Text",
        name: "段落文字",
        editors: [
            "外观属性",
            {
                field: "text",
                label: "文字内容",
                type: "string"
            },
            {
                field: "style.backgroundColor",
                label: "背景颜色",
                type: "color"
            },
            {
                field: "style.color",
                label: "文字颜色",
                type: "color"
            },
            {
                field: "style.font-size",
                label: "文字大小",
                type: "number",
                data: {
                    useSlider: true,
                    sliderStep: 1,
                    inputRange: [0, 100],
                    outputRange: [0, 150]
                }
            }
        ]
    }

    public style: React.CSSProperties = {
        color: "#333"
    }

    public text: string = "段落文字"
}

export class State { }

但是 把 Gaea-Editor 作为一个组件放在 antd-mobile 项目里面，把同样的组件复制过去用就有错， component.tsx 文件里面 webstorm 提示 Unresolved variable this.props.style 和 this.props.text type.ts 文件里面 webstorm 提示 Unused field text...

---

• 嗯，我感觉可能是没 理解怎么 Props 透传怎么搞

我对 传参数的理解是 看到源代码中 loadPluginByPosition( 可以 传position，后面多的的 自动作为参数) 然后还知道 @inject(className) <==> new className() @Connect 用法如下:Connect 用于 修饰 react 组件 会自动使用 Provider 阶段注入的值

希望得到一些帮助，🙏

[begoat]

还有一个小问题就是 内置组件 下拉选择 的这个 组件 一拖 自动focus 了，不好实现流畅自由的拖动

[ascoders]

@begoat inject、connect 的理解都正确，loadPluginByPosition 是用来加载插件的内部方法，如果需要拓展编辑器需要用到，如果有需求，我会继续完善一下文档。但是这些和正确使用没有啥关系，我说的透传是指，把 antd 组件包一层：

CustomAntd.component.tsx

import * as React from "react"
import { Button } from "atnd"
import { Props, State } from "./CustomAntd.type"

export default class Text extends React.Component<Props, State> {
    public static defaultProps = new Props()
    public state = new State()

    public render() {
        return (
            <Button {...this.props}/>
        )
    }
}

但是 把 Gaea-Editor 作为一个组件放在 antd-mobile 项目里面，把同样的组件复制过去用就有错， component.tsx 文件里面

这句话没看懂什么意思，你是想把 gaea-editor 编辑器组件放到 antd-mobile 项目里？没这必要吧。

[begoat]

谢谢，我在多试试，理解理解🙏