// cat.js
import catImage from './cat.jpg'
class Cat extends Taro.Component {
static defaultProps = {
mouse: {
x: 0,
y: 0
}
}

render() {
const { mouse } = this.props;
return (
<Image src={catImage} style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
);
}
}

// mouse.js
class Mouse extends Taro.Component {
constructor(props) {
super(props);
this.handleMouseMove = this.handleClick.bind(this);
this.state = { x: 0, y: 0 };
}

handleClick(event) {
const { x, y } = event.detail
this.setState({
x,
y
});
}

render() {
return (
<View style={{ height: '100%' }} onClick={this.handleClick}>

    {/*
      我们可以把 prop 当成一个函数，动态地调整渲染内容。
    */}
    {this.props.renderCat(this.state)}
  </View>
);

}
}

// MouseTracker.js
class MouseTracker extends Taro.Component {
render() {
return (
<View>
<View>点击鼠标!</View>
{/*
Mouse 如何渲染由 MouseTracker 的状态控制
*/}
<Mouse renderCat={mouse => (
<Cat mouse={mouse} />
)}/>
</View>
);
}
}

自定义组件怎么可能有className

配置文件里面加上

大佬们这个问题能不能解决一下 编译两次就出现 根本没法用
taro2.0.5版本

遇到同样的问题,我这不能设置为100vw
如何解决？

建议像这样做一个封装，可以使其和全局组件差不多 调用方式为：在该页面的任何地方使用(包括组件中，不过在组件中需要在组件componentDidMount生命周期后使用)

Taro.eventCenter.trigger('showLoading',msg)

Taro.eventCenter.trigger('hideLoading')

Taro.eventCenter.trigger('showSuccess',msg)

Taro.eventCenter.trigger('showError',msg)

import Taro, { Component } from '@tarojs/taro'
import { AtToast } from "taro-ui"
import { View } from '@tarojs/components'
export default class Index extends Component {
constructor(props) {
super(props)
this.showLoading = this.showLoading.bind(this)
this.hidModal = this.hidModal.bind(this)
this.showSuccess = this.showSuccess.bind(this)
this.showError = this.showError.bind(this)
this.state = {
isOpened: false,
type: 'success',
text: '',
timeVal: 2,
icon: ''
}
}
componentWillMount() {
Taro.eventCenter.on('showLoading', this.showLoading)
Taro.eventCenter.on('hideLoading', this.hidModal)
Taro.eventCenter.on('showSuccess', this.showSuccess)
Taro.eventCenter.on('showError', this.showError)
}
componentWillUnmount() {
if (this.state.type === 'loading') {
Taro.eventCenter.trigger('hideLoading')
}
Taro.eventCenter.off('showLoading', this.showLoading)
Taro.eventCenter.off('hideLoading', this.hidModal)
Taro.eventCenter.off('showSuccess', this.showSuccess)
Taro.eventCenter.off('showError', this.showError)
}
showLoading(text = '加载中...', timeVal = 60) {
this.setState({
isOpened: true,
type: 'loading',
text,
timeVal
})
}
showSuccess(text = '', timeVal = 1.5) {
this.setState({
isOpened: true,
type: 'success',
text,
timeVal
})
}
showError(text = '', timeVal = 1.5) {
this.setState({
isOpened: true,
type: 'error',
text,
timeVal
})
}
hidModal() {
this.setState({
isOpened: false,
})
}
render() {
const { isOpened, type, text, timeVal } = this.state
return (
<View>
<AtToast isOpened={isOpened} status={type} text={text} duration={timeVal * 1000} hasMask></AtToast>
</View>
)
}
}

不能 最少需要每个页面引用一次 但是你可以在封装成一个组件之后 使用消息订阅通知来实现和全局弹窗差不多的效果
这样只需要在一个页面引用一次 然后页面内的任何组件任何JS都可以调用和全局组件差不多的效果

66666666666666666666666666666666