React和Redux:用HTML标记包装React Map函数

Question

在下面的代码中，我在三元运算符中使用React映射函数。当我用div标记包装React映射函数时，代码执行得非常好，但如果我删除div标记，就会出现错误。我们是否需要总是用类似div标记的标记来包装React映射函数？

//React应用

render(){
const { networkList, isLoading} = this.props.userNetwork;
return(
<React.Fragment>
{isLoading === true ?
<div className="ListUsers">
<div className="Meta">
<h3 className="NetworkListDefaultMessage">Loading...</h3>
</div>
</div>: networkList.count === 0?
<div className="ListUsers">
<div className="Meta">
<h3 className="NetworkListDefaultMessage">No List</h3>
</div>
</div>:<div>
**{networkList.network_list.map(person =>
<div key={person.relationship_id} className="ListUsers">
<div className="Meta">
<h3 className="UserName">{person.name}</h3>
</div>
</div>)}**</div>
}
</React.Fragment>
)
}

Answer 1

使用React中的Fragment组件。它允许您将一堆元素分组到一个单独的组中，而不必呈现HTML标记。以ul标记内部的<li>标记为例，这非常方便。但请注意，您将无法呈现类名。

import { Fragment } from 'react';
// [...]
const { networkList, isLoading } = this.props.userNetwork;
return (
<React.Fragment>
{isLoading === true ? (
<div className="ListUsers">
<div className="Meta">
<h3 className="NetworkListDefaultMessage">Loading...</h3>
</div>
</div>
) : networkList.count === 0 ? (
<div className="ListUsers">
<div className="Meta">
<h3 className="NetworkListDefaultMessage">No List</h3>
</div>
</div>
) : (
<div>
{networkList.network_list.map((person) => (
<Fragment key={person.relationship_id}>
<div className="ListUsers">
<div className="Meta">
<h3 className="UserName">{person.name}</h3>
</div>
</div>
</Fragment>
))}
</div>
)}
</React.Fragment>
);

<Fragment>的一个短手是<>，它也同样有效。但它可能不是所有荧光笔都支持的。选择最适合你的。