はJXSで、このような予期しないトークン

Question

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

私は行うことはできませんループを得ましたか。これはステートレスなコンポーネントなので、レンダリングメソッドの外ではできません。

上記のコードに問題がありますか？

Answer 1

{...}must be an expressionの含有量。 forはステートメントです。あなたがforループを好む場合は、しかし、

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

：この場合

、あなたは、単一の最も外側の式（それはまたあなたのために、「自分の」プロパティのチェックを行います）でそれをすべて行うためにObject.keysを使用することができます、ちょうど配列内のアイテムを構築し、機能冗長矢印ではなく、簡潔な1作り、その後、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を確認してください。

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

をしかし、その代わりに、あなたはこのように、それがより簡単になりますマップを使用することができます：Stateless Functional Componentインサイド

また、あなたは、このように、functionを書くことができ

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

提案：

forループはobjectとなります。変数はobjectの各キーを表すので、user.hasOwnProperty(key)とは必ずしも一致しません。

2.For loopあなたはloop後にその変数を返し、その後、その中でui-itemsをプッシュするいくつかの変数を使用する必要があり、何も返さないであろう。 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'/>