javascript - for in 循环在 jsx 中得到了意外的标记

Question

const ProfileDetail = ({user}) => (
  <Card className="container">
    {for (let key in user) {
        if (user.hasOwnProperty(key)) {
          <li>{key}: {user[key]}</li>
        }
    }}
  </Card>
);

我不能在 jxs 中做这样的循环吗？不能在渲染方法之外进行，因为这是一个无状态组件。

上面的代码有什么问题？

Answer 1

{...} 的内容 must be an expression . for 是一个语句。

在这种情况下，您可以使用 Object.keys 在单个最外层表达式中完成所有操作(它还会为您检查“自己的”属性):

const ProfileDetail = ({user}) => (
  <Card className="container">
    {Object.keys(user).map(key => <li>{key}: {user[key]}</li>)}
  </Card>
);

但是，如果您更喜欢 for 循环，只需将函数做成一个冗长的箭头而不是简洁的箭头，将项目构建在一个数组中，然后在 JSX 中使用它们:

const ProfileDetail = ({user}) => {
  const items = [];
  for (let key in user) {
    if (user.hasOwnProperty(key)) {
      items.push(<li>{key}: {user[key]}</li>);
    }
  }
  return <Card className="container">{items}</Card>;
};