REACT - 呈现组件时出错

Question

我有以下代码，但无效

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default class Splash extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.chars}>
          <SeparateText value='AFEW' />
        </View>
      </View>
    );
  }
}

class SeparateText extends Component {
  render() {
    return ({
      this.props.value.split('')
        .map(char => <Text>{char}</Text>)
    });
  }
}

执行时，服务器显示以下错误：

我的最终目标是做这样的事情：

我做到了！使用下面的代码我做我正在尝试做的事情，但我需要一些代码来显示该屏幕使用map并做出反应。我尝试了许多形式，但不成功。

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default class Splash extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.splashChars}>
          <SplashChar value='A' />
          <SplashChar value='F' />
          <SplashChar value='E' />
          <SplashChar value='W' />
        </View>
        <View style={styles.splashText}>
          <Text></Text>
        </View>
      </View>
    );
  }
}

class SplashChar extends Component {
  render() {
    return (
      <Text style={styles.splashChar}>{this.props.value}</Text>
    );
  }
}

Answer 1

您需要一个根封闭标记。

return (
   <View>{this.props.value.split('').map(char => <Text>{char}</Text>)</View>
);

Answer 2

您遗失了JSX内的View。

class SeparateText extends Component {
  render() {
    return (
      <View>
        {this
          .props
          .value
          .split('')
          .map(char => <Text>{char}</Text>)
        }
      </View>
    )
  }
}