在jsx循環中獲得意想不到的標記

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

我不能在jxs中這樣循環嗎？由於這是一個無狀態組件，因此無法在render方法之外執行。在jsx循環中獲得意想不到的標記

上述代碼有什麼問題？

來源

2017-04-22 Jay

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

來源

2017-04-22 12:52:25

裏面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'/>

來源

2017-04-22 12:57:19

在jsx循環中獲得意想不到的標記

回答

相關問題