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 中做这样的循环吗？无法在 render 方法之外执行此操作，因为这是一个无状态组件。

上面的代码有什么问题？

Answer 1

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

在这种情况下，您可以使用 Object.keys 在单个最外层表达式中完成所有操作（它还会为您执行 "own" 属性检查）：

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

Answer 2

在 JSX 内部我们不能使用 if-else/switch/for，但是你可以调用一个函数，在里面你可以使用所有这些。检查 DOC.

里面Stateless Functional Component也可以这样写function，像这样：

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

建议：

1. 当使用 for 循环与 object 时，变量将代表 object 的每个键，因此检查 user.hasOwnProperty(key) 我觉得不需要。

2. For loop 不会 return 任何东西，你需要使用一些变量将 ui-items 推入其中，然后 return loop 之后的那个变量。使用 map 它会很容易，而且它会在更少的行中完成相同的任务，你也不需要额外的变量。

检查这个例子：

let user = {a:1, b:2, c:3, d:4, e:5};
const ProfileDetail = ({user}) => {
    var createList = function(){
       let a = [];
       for (let key in user) {
          a.push(<li>{key}: {user[key]}</li>)
       }
       return a;
    }
    return (
       <ul>
           {createList()}
           
           ------By using map------
           {
             Object.keys(user).map(el => <li key={el}>{el}: {user[el]} </li>)
           }
           
      </ul>
   ) 
}

ReactDOM.render(<ProfileDetail user={user}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

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

for in loop in jsx got unexpected token

javascript

reactjs

react-jsx