在react项目中引入taro组件

287 阅读1分钟
import { View, Button } from '@tarojs/components';

export default function App() {
  return (
    <div>
      <View>123</View>
        <Button type="primary">dddd</Button>
    </div>
  );
}

直接这么写的话会出现

image.png

1、需要添加别名配置

alias: {
      '@tarojs/components$': '@tarojs/components/lib/react',
    },

2、手动注册web components,手动引入web componts的样式

import '@tarojs/components/dist/taro-components/taro-components.css';

applyPolyfills().then(() => {
  defineCustomElements(window);
});

如果出现DEPRECATED_ADAPTER_COMPONENT is not defined错误
报错代码在 node_modules/@tarojs/components/lib/react/react-component-lib/createComponent.js 第 8 行:if (!DEPRECATED_ADAPTER_COMPONENT && defineCustomElement !== undefined) 将 DEPRECATED_ADAPTER_COMPONENT 变量 去掉就可以运行

这个删除只是本地的删除,如何“优雅”地修改 node_modules 下的代码juejin.cn/post/702225… 这样就可以保证上线后的代码可以正常运行

参考文章
1、# jest 运行报错:ReferenceError: DEPRECATED_ADAPTER_COMPONENT is not defined github.com/NervJS/taro…
2、在React项目中import @tarojs/components, 会报组件undefined的错误github.com/NervJS/taro…