使用有赞日历组件，函数传不进去

[houta-higuchi]

相关平台

微信小程序

小程序基础库: 2.14.1
使用框架: React

复现步骤

export default function HomeScreen(route: any) {
    function formatter (day) {
        console.log(day)
    }
    return (
         <van-calendar
                formatter={formatter}  //  组件日志显示formatter为null
                show={showCalendar}
                showConfirm
                //type='range'
                onClose={onCloseCalendar}
                onConfirm={onConfirmCalendar}
            >
                <Slot name='title'>
                    <View>请选择日期</View>
                </Slot>
            </van-calendar>
    )
}

期望结果

formatter不为null

实际结果

formatter为null

环境信息

 Taro CLI 2.2.6 environment info:
    System:
      OS: macOS 11.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.8.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.7 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: ^3.0.18 => 3.0.18 
      @tarojs/components: 3.0.18 => 3.0.18 
      @tarojs/mini-runner: 3.0.18 => 3.0.18 
      @tarojs/taro: 3.0.18 => 3.0.18 
      @tarojs/webpack-runner: 3.0.18 => 3.0.18 
      eslint-config-taro: 3.0.18 => 3.0.18 
      react: ^16.10.0 => 16.14.0 
      taro-ui: v3.0.0-alpha.1 => 3.0.0-alpha.1 

[Chen-jj]

升级到最新版再试试

[Teemwu]

@Chen-jj taro 3.0.23 版本，Vue 下也是同样情况

[Chen-jj]

@Teemwu React 不能给基础组件设置函数值的 props，暂时没有办法。

[fzudust]

@Chen-jj 这个hack方法没有用

[Chen-jj]

@Chen-jj 这个hack方法没有用

上述回答的代码不正确。应该先给函数属性一个默认值，不然 Taro 在编译时不知道需要把该属性输出到 wxml 里。

export default class Index extends Component {
  el = React.createRef()

  onReady () {
    Taro.nextTick(() => {
      this.el.current.setAttribute('formatter', this.formatter)
    })
  }

  formatter () {
    return function (day) {
      console.log('formatter', day)
    }
  }

  render () {
    return (
      <View>
        <van-calendar ref={this.el} formatter={null} show={true} />
      </View>
    )
  }
}

[fzudust]

@Chen-jj 这个hack方法没有用

上述回答的代码不正确。应该先给函数属性一个默认值，不然 Taro 在编译时不知道需要把该属性输出到 wxml 里。

export default class Index extends Component {
  el = React.createRef()

  onReady () {
    this.el.current.setAttribute('formatter', this.formatter)
  }

  formatter () {
    return function (day) {
      console.log('formatter', day)
    }
  }

  render () {
    return (
      <View>
        <van-calendar ref={this.el} formatter={null} show={true} />
      </View>
    )
  }

@Chen-jj 这个hack方法没有用

上述回答的代码不正确。应该先给函数属性一个默认值，不然 Taro 在编译时不知道需要把该属性输出到 wxml 里。

export default class Index extends Component {
  el = React.createRef()

  onReady () {
    this.el.current.setAttribute('formatter', this.formatter)
  }

  formatter () {
    return function (day) {
      console.log('formatter', day)
    }
  }

  render () {
    return (
      <View>
        <van-calendar ref={this.el} formatter={null} show={true} />
      </View>
    )
  }
}

收到，明天上班的时候再试一次

[smoothdvd]

@Chen-jj 我用的是useReady Hook，这个hack不会每次都成功。useEffect+nextTick倒是每次都可以。

  // useReady(() => {
  //   console.log(el.current);
  //   el.current.setAttribute('upload', upload);
  // });

  useEffect(
    () =>
      nextTick(() => {
        el.current.setAttribute('upload', upload);
      }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );

[Chen-jj]

@Chen-jj 我用的是useReady Hook，这个hack不会每次都成功。useEffect+nextTick倒是每次都可以。

  // useReady(() => {
  //   console.log(el.current);
  //   el.current.setAttribute('upload', upload);
  // });

  useEffect(
    () =>
      nextTick(() => {
        el.current.setAttribute('upload', upload);
      }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );

是真机么？模拟器上倒是 ok

[smoothdvd]

@Chen-jj 模拟器。似乎某些警告会导致失败。

打印el.current结果在警告之前，hack就不起作用；

打印el.current结果在警告之后，hack就能起作用；

[Chen-jj]

加一句 Taro.options.debug = true 试试，按道理 onLoad 的初始化和 onReady 的 setAttribute 会拆开两次 setData，如果第二次 setData 是 root.cn[x].cn[x].propName = function 的形式就会生效。

[smoothdvd]

@Chen-jj

无效时

有效时

[Chen-jj]

@smoothdvd 看来还是要加 nextTick，我修改一下回复里的代码，感谢反馈~

[xavieryang2011]

vue怎么解决呢