Javascript jsx中的for in-loop获得了意外的令牌 constprofiledetail=（{user}）=>( {for（让用户输入）{ if（user.hasOwnProperty（key））{ {key}:{user[key]} } }} );

我不能在jxs中这样做循环吗？无法在render方法之外执行此操作，因为这是一个无状态组件

---

上面的代码有什么问题？

a

{…}

的内容

for

是一条语句

在这种情况下，您可以使用

Object.keys

在一个最外层的表达式中完成所有操作（它还为您执行“own”属性检查）：

---

在JSX内部，我们不能使用

if-else/switch/for

，但您可以调用一个函数，在这个函数内部，您可以使用所有这些。检查一下

在

无状态功能组件

内部，您还可以编写

函数

，如下所示：

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

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

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

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

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