Question

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

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>
        );

为什么当我尝试将元素作为数组的一部分返回时却不起作用，但是当我直接将其返回时如何起作用？如何解决此问题？

预先感谢

Answer 1

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

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

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

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

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()函数在每个类的基础上创建一个新的列表项元素。

要记住的关键是您要 从用户界面中分离数据 。然后，您可以利用数组对象上的.map()之类的动态模板呈现帮助器功能。

希望有帮助！

数组未出现在render（）上

1 个答案: