您需要将其包装在一个元素内。
像这样(
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>


