表格无法在React

Question

我是React的新手。我想在表格中加载一些数据，否则显示＆＃39;正在加载＆＃39;。我的render()功能目前如下所示：

return (
    <div>
        { this.state.loaded ? <tbody>{tuples}</tbody> : 'Loading ...' }
    </div>
);

我的问题是，如果没有<div>标签，我会从Gulp获得构建错误，但是对于它们，我的表列不会与数据保持一致。

知道如何解决这个问题吗？

Answer 1

您可以执行以下操作：

return (this.state.loaded ? <tbody>{tuples}</tbody> : <span>Loading ...</span>);

你得到的错误可能是这样的：

  

未捕获错误：不变违规：App.render（）：必须返回有效的ReactComponent。您可能已经返回了undefined，数组或其他一些无效对象。

基本上，React希望您的render()函数返回有效的ReactComponent。如果没有您的包裹<div>，当this.state.loaded为false时，您会返回一个字符串，但字符串与ReactComponent不同，因此错误。

在上面提供的解决方案中，如果<tbody>为state.loaded，我们将返回true元素（正如您所做的那样）。但是，如果它false我们返回＆＃34;正在加载...＆＃34; 字符串包含在<span>内，这是有效的ReactComponent。

显然，如果您愿意，可以选择<span>以外的任何其他元素，但我建议在大多数情况下使用它，因为默认情况下它不会带来任何视觉效果变化 - 这很方便，例如这个。

Answer 2

您可以使用以下内容：

return (

    <tbody>
            { this.state.loaded ? {tuples} : 'Loading ...' }
    </tbody>
    );

这将避免div元素