数组未出现在render（）上

伊万·希德

您好，我正在尝试动态渲染一些东西，到目前为止，这是我所拥有的：

render() {
    var contenido = [];
            contenido.push(
              <View style={styles.container}>
                <Text style={styles.welcome}>¿Acabas de tener un accidente?</Text>
                <TouchableHighlight style={styles.button} onPress={this.sendAdjusterRequest}>
                    <Text style={{color: 'white'}}> Pedir ajustador </Text>
                </TouchableHighlight>
              </View>);
    return (
              contenido
            );
  }
}

完成此操作后，我的视图上没有任何显示，但是当我这样做时它可以工作：

return (
          <View style={styles.container}>
            <Text style={styles.welcome}>¿Acabas de tener un accidente?</Text>
            <TouchableHighlight style={styles.button} onPress={this.sendAdjusterRequest}>
                <Text style={{color: 'white'}}> Pedir ajustador </Text>
            </TouchableHighlight>
          </View>
        );

为什么当我尝试将元素作为数组的一部分返回时却不起作用，而当我直接返回它们时又起作用了，我该如何解决呢？

提前致谢

内森

该render()方法不支持直接呈现仅数组的返回类型。调用React组件的render()方法时，它必须返回以下之一：

反应元素。通常通过JSX创建。例如，<div />和<MyComponent />是React元素，分别指示React渲染DOM节点或另一个用户定义的组件。
数组和片段。让您从渲染返回多个元素。有关更多详细信息，请参见有关片段的文档。
门户网站。让您将子级渲染到另一个DOM子树中。有关更多详细信息，请参见门户网站上的文档。
字符串和数字。这些在DOM中呈现为文本节点。布尔值或null。什么都不渲染。（大多数情况下都支持返回测试&&<Child />模式，其中test为布尔值。）

有关更多信息，请查看render() 规范。

您的第一个选项不是有效的呈现选项..但是，您的第二段代码：

return (
          <View style={styles.container}>
            <Text style={styles.welcome}>¿Acabas de tener un accidente?</Text>
            <TouchableHighlight style={styles.button} onPress={this.sendAdjusterRequest}>
                <Text style={{color: 'white'}}> Pedir ajustador </Text>
            </TouchableHighlight>
          </View>
        );

是返回一个有效的React与定义的元素JSX：即你的父<View />组件。

如果要使用数组返回动态数据，则一个简单的示例如下所示：

render() {
    const studentClasses = ['math', 'science', 'history'];
    return(
        studentClasses.map(singleClass => (
           <li>{singleClass}</li>
        ));
    )  
}

注意，我们正在遍历studentClasses数组，该数组可能包含来自数据库或api调用的动态数据。然后，我们利用该.map()函数在每个类的基础上创建一个新的列表项元素。

要记住的关键是要从UI中分离数据。然后，您可以利用动态模板渲染助手功能，例如.map()在数组对象上。

希望有帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。