taro 不支持render中,使用函数多条件渲染

不支持render中,使用函数多条件渲染
h5不报错,但是编译成小程序时 会报错

错误写法:

onRenderContent = () => {
  const { verified, recognized } = this.state;
  let content = null; // 初始化时,必须赋值,否则小程序报错undefined
  if (verified && recognized) {
    content = (
      <view>验证通过且识别通过 </view>
    ) 
  } else if (!verified && recognized) {
    content = (
      <view> 识别通过但是验证不通过</view>
    )
  } else {
    content = (
      <view> 默认显示的值</view>
    )
  }
  return content;
}

render () {
  return (
    <view>
      {this.onRenderContent()}
    </view>
  )
}

正确写法:

render () {
  const { verified, recognized } = this.state;
  let content = null; 
  if (verified && recognized) {
    content = (
      <view>验证通过且识别通过 </view>
    )
  } else if (!verified && recognized) {
    content = (
      <view> 识别通过但是验证不通过</view>
    )
  } else {
    content = (
      <view> 默认显示的值</view>
    )
  }
  return (
    <view>
      {content}
    </view>
  )
}

.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 React 使用 Tarorender 方法,你需要按照以下步骤进行操作: 1. 首先,确保你已经安装了 Taro 和 React 相关的依赖。 2. 创建一个新的 Taro 页面组件,可以使用命令行工具 `taro create` 或手动创建一个新的文件。 3. 在你的页面组件引入 React 的相关依赖,例如 `import React from 'react'`。 4. 在组件类定义一个 render 方法,并在该方法返回你想要渲染的 JSX。 5. 在组件的 `render` 方法,你可以使用 Taro 提供的 JSX 编译器来编译 JSX 代码,例如使用 `TaroJsxParse` 方法。 6. 最后,在组件的 `render` 方法使用 Taro 提供的 JSX 编译器将 JSX 代码编译成 Taro 可以识别的代码,并返回编译后的结果。 下面是一个使用 Tarorender 方法的简单示例: ```jsx import React from 'react'; import { View, Text } from '@tarojs/components'; import { TaroJsxParse } from '@tarojs/jsx-compiler'; class MyPage extends React.Component { render() { const jsxCode = `<View> <Text>Hello, Taro!</Text> </View>`; const parsedCode = TaroJsxParse(jsxCode); return parsedCode; } } export default MyPage; ``` 在上述示例,我们引入了 React 和 Taro 的相关依赖,然后定义了一个名为 `MyPage` 的页面组件,其的 `render` 方法使用Taro 的 JSX 编译器来编译 JSX 代码,并返回编译后的结果。 注意:在实际开发,你需要根据你的项目需求和页面结构来编写具体的 JSX 代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值