JSX에서 맵을 사용하여 중첩 루프를 만드는 방법은 무엇입니까?

Question

나는 두 개의 중첩 map을 가지고 달성 할 수 없습니다

render() { 
    return (
     <table className="table"> 
     <tbody> 
      {Object.keys(this.state.templates).map(function(template_name) { 
      return (
       <tr key={template_name}><td><b>Template: {template_name}</b></td></tr> 

       {this.state.templates[template_name].items.map(function(item) { 
       return (
        <tr key={item.id}><td>{item.id}</td></tr> 
       ) 
       })} 
      ) 
      })} 
     </tbody> 
     </table> 
    ) 
    } 

이는 SyntaxError: unknown: Unexpected token 제공합니다.

map을 JSX로 중첩하는 방법은 무엇입니까?

Answer 1

요소 안에 포장해야합니다.

이 같은

뭔가 (I 인해 테이블 ​​요소의 규칙을 추가 tr를 추가 한) :

render() { 
    return (
     <table className="table"> 
     <tbody> 
      {Object.keys(templates).map(function (template_name) { 
      return (
       <tr key={template_name}> 
       <tr> 
        <td> 
        <b>Template: {template_name}</b> 
        </td> 
       </tr> 
       {templates[template_name].items.map(function (item) { 
        return (
        <tr key={item.id}> 
         <td>{item}</td> 
        </tr> 
       ); 
       })} 
       </tr> 
      ); 
      })} 
     </tbody> 
     </table> 
    ); 
    } 
} 

(테이블없이) 예를 실행 :

const templates = { 
 
    template1: { 
 
    items: [1, 2] 
 
    }, 
 
    template2: { 
 
    items: [2, 3, 4] 
 
    }, 
 
}; 
 

 
const App =() => (
 
    <div> 
 
    { 
 
     Object.keys(templates).map(template_name => { 
 
     return (
 
      <div> 
 
      <div>{template_name}</div> 
 
      { 
 
       templates[template_name].items.map(item => { 
 
       return(<div>{item}</div>) 
 
       }) 
 
      } 
 
      </div> 
 
     ) 
 
     }) 
 
    } 
 
    </div> 
 
); 
 
ReactDOM.render(<App />, document.getElementById('root'));

<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="root"></div>

Answer 2

I 문제는 반환 형식이 React16의 개체가 아니라 배열이어야한다고 생각하십시오. 이 아래와 같이 시도해 볼 수도 있습니다 :의

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     templates: { 
 
     foo: { 
 
      items: [ 
 
      {id: 0},{id:1} 
 
      ] 
 
     }, 
 
     bar: { 
 
      items: [ 
 
      {id: 2},{id:3} 
 
      ] 
 
     } 
 
     } 
 
    } 
 
    } 
 
    
 
    renderTemplate = (template, name) => { 
 
    let data = [] 
 
    data = template.items 
 
    data.unshift({ name: name }) 
 
    return data.map((item, index) => <tr key={index}><td>{item.name ? item.name : item.id}</td></tr>) 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <table> 
 
     <tbody> 
 
      {Object.keys(this.state.templates).map(name => { 
 
      return this.renderTemplate(this.state.templates[name], name) 
 
      })} 
 
     </tbody> 
 
     </table> 
 
    ) 
 
    } 
 
} 
 

 

 

 
ReactDOM.render(<App />, document.getElementById('root'))

td { 
 
    color: white; 
 
    padding: 0 20px; 
 
    background: grey; 
 
}

<div id="root"></div> 
 

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