Taro: React is not defined

[jpdan]

由于render中很多，想简单拆分下，报错：React is not defined，
如果这种写法不行，请问有其他写法吗？

[yuche]

你可以 render() 设置一个变量，然后在放到任何你想嵌入的地方。

render() {
  const element = <Content />
  return <View>{element}</View>
}

[xiao0502]

你可以 render() 设置一个变量，然后在放到任何你想嵌入的地方。

render() {
  const element = <Content />
  return <View>{element}</View>
}

这个Content是如何定义的呢 @yuche

[yuche]

你新建一个自定义组件 import 它叫 Content @xiao0502

[JackPu]

@yuche 什么原因支持不了 render 拆成函数的形式？

[cuixi]

@yuche 什么原因支持不了 render 拆成函数的形式？
同问？

[yuche]

@yuche 什么原因支持不了 render 拆成函数的形式？
同问？

1.3 支持了

[wsz7777]

 transData = data => {
    const arr = data.map(v => ({
      title: v.createDate,
      content: [
        <View key={v.scheduleId}>
          <View className={S.title}>{v.projectScheduleTitle}</View>
          <View className={S.desc}>
            <RichTextShow domHtml={v.projectDesc} />
          </View>
          <View>
            {v.imgs.map(src => (
              <Image
                key={src.sort}
                src={src.imgAddress}
                className={S.contImage}
              />
            ))}
          </View>
        </View>
      ],
      icon: "check-circle"
    }));
    this.setState({ timeList: arr });
  };

  render() {
    return (
      <View className={S.timeLine}>
        <AtTimeline pending items={this.state.timeList} />
      </View>
    );
  }

这样写在小程序中报错

[yuche]

 transData = data => {
    const arr = data.map(v => ({
      title: v.createDate,
      content: [
        <View key={v.scheduleId}>
          <View className={S.title}>{v.projectScheduleTitle}</View>
          <View className={S.desc}>
            <RichTextShow domHtml={v.projectDesc} />
          </View>
          <View>
            {v.imgs.map(src => (
              <Image
                key={src.sort}
                src={src.imgAddress}
                className={S.contImage}
              />
            ))}
          </View>
        </View>
      ],
      icon: "check-circle"
    }));
    this.setState({ timeList: arr });
  };

  render() {
    return (
      <View className={S.timeLine}>
        <AtTimeline pending items={this.state.timeList} />
      </View>
    );
  }

这样写在小程序中报错

JSX 在 Taro 里是不能当做数据来操作的

[wsz7777]

 transData = data => {
    const arr = data.map(v => ({
      title: v.createDate,
      content: [
        <View key={v.scheduleId}>
            item xxxxxx
        </View>
      ],
      icon: "check-circle"
    }));
    this.setState({ timeList: arr });
  };

  render() {
    return (
      <View className={S.timeLine}>
        <AtTimeline pending items={this.state.timeList} />
      </View>
    );
  }

这样没问题，h5中也没问题。那我现在需要自定义timeline中每项的ui，怎么办

[kolf]

@wsz7777 同问，有解决方法了吗？

[crimson968]

同问