RubyLouvre / anu

the React16-compat library with hooks
https://rubylouvre.github.io/anu/
Apache License 2.0
3.19k stars 319 forks source link

toPage is not a function #500

Closed ghost closed 5 years ago

ghost commented 5 years ago

之前用的旧版本 貌似可以 运行demo的错误:

VM932:1 thirdScriptError 
 sdk uncaught third Error 
 _ReactWX2.default.toPage is not a function 
 TypeError: _ReactWX2.default.toPage is not a function
    at http://127.0.0.1:18912/appservice/pages/index.js:86:24
    at require (http://127.0.0.1:18912/appservice/__dev__/WAService.js:19:7304)
    at <anonymous>:7:7
    at HTMLScriptElement.scriptLoaded (http://127.0.0.1:18912/appservice/appservice?t=1541780389755:2629:23)
RubyLouvre commented 5 years ago

早没有toPage, 现在是registerPage 出现这种情况是你没有unlink之前的nanachi

命令行定位到anu/packages/cli目录下,执行npm unlink

https://rubylouvre.github.io/nanachi/documents/install.html

ghost commented 5 years ago

谢 是没unlink 旧版本的原因

ghost commented 5 years ago

@RubyLouvre

简单试用了下 ,发现如下几个问题

  1. 子组件回调函数必须bind(this)
  2. render 函数不支持写if 语句
  3. render 写 {this.handleXxx} return 不返回
  4. 目前支持 prop-types 类型检查吗?
  5. attached时为 CountDown 没有对应react实例 这个错误信息没找到原因
// 组件 CountDown
//  this.sendCode 必须bind(this)才可以获取到分发参数,能否简化下?
<CountDown ref="countDown" color="#555" time={60} onSendCode={this.sendCode} />

-------

/*eslint-disable*/
import React from '@react'
//import { isColor } from '../../utils/assist'

import './index.less'

class CountDown extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      second: props.time || 60,
      defaultText: props.defaultText || '获取验证码',
      disabled: false
    }
  }

  run() {
    // 
    this.props.onSendCode('传递给父组件')
  }

  // 开始倒计时
  start() {
    if (this.state.disabled) return
    this.setState({
      disabled: true
    })
    // 倒计时
    const timer = setInterval(() => {
      if (this.state.second > 1) {
        this.setState({
          second: this.state.second - 1
        })
      } else {
        this.setState({
          second: this.state.time,
          disabled: false
        })
        clearInterval(timer)
      }
    }, 1000)
  }

  renderTipsText() {
    return this.state.disabled ? `${this.state.second}s后重试` : this.state.defaultText
  }

  render() {
    const { ghost, color, size, disabled } = this.props
    let objStyle = ''

    // 不支持这样写 render函数写if 会报错
    // if (isColor(color)) {
    //  objStyle +=`color:${color};`
    //}

   //  objStyle += isColor(color) ? `color:${color};` : ''
    objStyle += size ? `font-size:${size}rpx;` : ''
    // objStyle += ghost && isColor(color) ? `border:1rpx solid ${color};` : ''

    return (
      <div>
        <div class="countdown" style={objStyle}>
          <span class={disabled ? 'wait' : 'active'} onClick={this.run}>
            {/* 调用函数这边不显示 return 不显示  */}
            {this.renderTipsText()}
          </span>
        </div>
      </div>
    )
  }
}

CountDown.defaultProps = {
  ghost: false,
  size: '30'
}

export default CountDown