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在一个最外层的表达式中完成所有操作（它还会为您执行＆＃34;自己的＆＃34;属性检查）：

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不会返回任何内容，您需要使用某个变量来推送ui-items，然后在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循环中的jsx得到了意外的令牌

2 个答案: