常见问题

我可以使用 React Hooks / Redux / Dva / 其他 React 特性 吗?

可以。

我可以使用 Ant Design / Ant Design Mobile / 其他 React DOM 依赖类库吗?

不可以。

小程序中没有 DOM,无法使用基于 React DOM 的 UI 库。

既然 web 的现成方案不能直接使用,我应该怎么快速开发 UI 组件?

Remax 支持直接使用原生组件库。具体请参考 小程序自定义组件

Remax 支持跨平台开发吗?

支持。

具体可参考 跨平台开发

WebStorm IDE 编辑器下 api 类型无提示问题

原因是非项目的直接依赖,WebStorm 就不会去索引它。以 wechat 平台为例,我们进行以下操作即可:

把 node_modules/@remax/wechat 这个目录设置为 “not excluded”

相关 issue 链接

使用高阶组件导致页面的生命周期未调用

如果使用了 Redux 的 connect ,请将 connect 的 option.forwardRef 设置为 true文档。其它第三方库的高阶组件的处理方式也类似。原因如下。

对于使用 class 组件的页面,Remax 会通过 ref 获取页面生命周期。当页面组件被高阶组件(有时被称为 HOC)包裹时,通过 ref 取得的是 HOC 最外层的容器组件,而不是被包裹的组件 。我们需要 React.forwardRef 将 ref 转发到内部组件。

import React, { forwardRef } from 'react';
import { View } from 'remax/ali';
class IndexPage extends React.Component {
onReady() {
console.log('onReady被调用');
}
render() {
return <View>这是一个例子</View>;
}
}
// HOC 的容器是一个函数式组件
const HOC = Component => {
const Wrapped = (props, ref) => {
// 一些高阶组件的逻辑
return <Component {...props} ref={ref} />;
};
return forwardRef(Wrapped);
};
// 另一种情况,HOC 容器是一个 class component
const ClazzHOC = Component => {
class Wrapped extends React.Component {
// 另一些高阶组件的逻辑
render() {
const { forwardRef, ...rest } = this.props;
return <Component {...rest} ref={forwardRef} />;
}
}
// 比起第一种情况,这里的处理要稍微麻烦一些
return forwardRef((props, ref) => <Wrapped {...props} forwardRef={ref} />);
};
// 下面这三种方式导出的页面都是可以按照预期调用 `onReady`
export default ClazzHOC(IndexPage);
// export default HOC(IndexPage);
// export default IndexPage;

编译后小程序提示找不到 xxx 文件路径

  1. 尝试删除打包目录,重新 build
  2. 真机中出现此问题,查看编译选项是否开启了代码保护,目前开发模式开启代码保护有出错可能。

微信嵌套层级

Remax 默认为微信的每个 host 组件定义了嵌套层数。其中 View 20 层,其他组件都在 1 ~ 5 层。如果出现形如下图的情况,可以通过配置修改嵌套层数。

// remax.config.js
{
UNSAFE_wechatTemplateDepth: {
button: 2, // 把 button 的嵌套层数修改为 2 层
}
}