jsx의 in 루프에 예기치 않은 토큰이 있습니다.

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

jxs에서 루프를 수행 할 수 없습니까? 이것은 상태 비 저장 구성 요소이므로 렌더링 메서드 외부에서 수행 할 수 없습니다.jsx의 in 루프에 예기치 않은 토큰이 있습니다.

위 코드에 어떤 문제가 있습니까?

출처

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을 확인하십시오.

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)이 필요하지는 않습니다.

2For 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의 in 루프에 예기치 않은 토큰이 있습니다.

답변

관련 문제