javascript - 函数作为 React 子项无效

Question

我创建了一个const backText返回 <Text />并将其放入 render ，但没有显示出来。

我认为它应该有效，但它显示黄色警告

Functions are not valid as a React child.

这是我的render

render() {
    const backText = () => {
      return (
        <Text>Test</Text>
      );
    };

        return (
          <View style={{ flex: 1, backgroundColor: '#B0E0E6' }}>
            <View style={{ flex: 0.9, justifyContent: 'center', alignItems: 'center' }}>
              <Text>Three !</Text>
            </View>

            <View style={{ flex: 0.1, alignItems: 'center', marginBottom: 15 }}>
              <ActivityIndicator size="large" color="#ffffff" />
              <Text style={{ fontSize: 16, marginTop: 8, color: 'gray' }}>Loading...</Text>
              {backText}
            </View>

          </View>
        );
      }

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

您可以像这样更改代码:

backText = () => {
  return (
    <Text>Test</Text>
  );
}

render() {
        return (
          <View style={{ flex: 1, backgroundColor: '#B0E0E6' }}>
            <View style={{ flex: 0.9, justifyContent: 'center', alignItems: 'center' }}>
              <Text>Three !</Text>
            </View>

            <View style={{ flex: 0.1, alignItems: 'center', marginBottom: 15 }}>
              <ActivityIndicator size="large" color="#ffffff" />
              <Text style={{ fontSize: 16, marginTop: 8, color: 'gray' }}>Loading...</Text>
              {this.backText()}
            </View>

          </View>
        );
      }