[TOC]
# Component is not found in path "xxxxx"
```js
jsEnginScriptError
Component is not found in path "components/Toast/index" (using by "components/loginModal/index");onAppRoute
Error: Component is not found in path "components/Toast/index" (using by "components/loginModal/index")
```
我们需要知道,
微信的组件**必有组件构造函数:**
```
Component({ })
```
Taro 组件生成的代码需要如下,才算正常:
```
Component(require('../../npm/@tarojs/taro-weapp/index.js').default.createComponent(TInfo));
```
# API 兼容性方案
| API | 兼容性 | 说明 |思路 |
| --- | --- |--- |--- |
| `Taro.getApp()` | h5 未实现 API | - | - |
# 样式兼容
在编译时,Taro 会帮你对样式做尺寸转换操作,但是如果是在 JS 中书写了行内样式,那么编译时就无法做替换了,针对这种情况,Taro 提供了 API `Taro.pxTransform` 来做运行时的尺寸转换。
~~~jsx
Taro.pxTransform(10) // 小程序:rpx,H5:rem
~~~
建议使用 Taro 时,设计稿以 iPhone 6 `750px` 作为设计尺寸标准。
[设计稿及尺寸单位](https://nervjs.github.io/taro/docs/size.html#文件)
## class 样式转换
[支持替换 jsx 中的属性](https://github.com/NervJS/taro/issues/2077)
~~~
jsxAttributeNameReplace: {
customClass: 'custom-class',
customTitleClass: 'custom-title-class',
}
~~~
[https://nervjs.github.io/taro/docs/size.html](https://nervjs.github.io/taro/docs/size.html)
## 事件触发
### 属性名必须以 `on` 开头
props 传函数,在小程序中是通过*组件事件*来实现的,在子组件中调用时无法获取到函数执行的返回值,同时给子组件传递函数时,属性名必须以`on`开头
```
// 外部的组件上的`onChange`事件,会被编译成 `bindonchange`
this.$scope.triggerEvent('onchange', { index: index });
```
解决办法:
自定义父组件(`\src\common\component.js`),所有自定义子组件都必须继承该组件。
### 必须明确的使用 `stopPropagation`
在 Taro 中另一个不同是你不能使用`catchEvent`的方式阻止事件冒泡。你必须明确的使用`stopPropagation`。例如,阻止事件冒泡你可以这样写:
```jsx
class Toggle extends Component {
constructor (props) {
super(props)
this.state = {isToggleOn: true}
}
onClick = (e) => {
e.stopPropagation()
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}))
}
render () {
return (
<button onClick={this.onClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
)
}
}
```
## 组件关系 relations
当两个自定义组件之间有着**嵌套关系**的时候,可以在两个组件之内定义[relations](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html),从而直接访问对方组件的实例。**必须在两个组件中都定义 relations,否则不会生效**
## 自定义组件的 behaviors?
[【bug】定义了behaviors,但是没有执行呢](https://github.com/NervJS/taro/issues/656)
beta.8 版本组件已支持 behaviors 配置:`static behaviors = []`
`注意`:也就是只能按照 小程序本身设置 `behaviors` 方式设置,不支持 `Taro` 生命周期。
```js
function bindBehaviors (weappComponentConf, ComponentClass) {
if (ComponentClass.behaviors) {
weappComponentConf.behaviors = ComponentClass.behaviors
}
}
// 代码出处为:`taro/packages/taro-weapp/src/create-component.js`
```
1. 不支持 relations 和 [Behavior ](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html)
[Taro 不支持 relations 和 Behavior ](https://nervjs.github.io/taro/docs/taroize.html#%E4%B8%8D%E6%94%AF%E6%8C%81-relations-%E5%92%8C-behavior)
[微信小程序 发现之旅(三)—— 组件之间的参数传递](https://www.cnblogs.com/wisewrong/p/9110687.html)
2. [试用React语法的多端框架Taro问题汇总](https://juejin.im/post/5b8ca6236fb9a01a1b20162e)