javascript - react 表行组件

Question

我有一个 react 组件，可以呈现列表的详细信息..

import React, { Component } from 'react';

export default RecordListDetail = ({details}) => {

  return (<tr>
         <td>{details.coreURL}</td>
         <td>{details.source}</td>
      </tr>
   )
 };

但是这个列表发生了变化，所以我想以编程方式生成它。我尝试过但没有成功...

import React, { Component } from 'react';

export default RecordListDetail = ({details}) => {

  return (<tr>
  {details.map ((details, index) =>
  <td key={index}>
    {details}
  </td>
  )}
  </tr>
)};

但它不起作用。我做错了什么？

Answer 1

因为 details 是一个对象而不是数组，所以您需要使用类似 Object#keys 的内容。获取键的数组。现在您可以映射键数组以及详细信息中的值:

import React from 'react'; // no need to import Component

export default RecordListDetail = ({ details }) => (
    <tr>
        {Object.keys(details).map((key) =>
            <td key={ key }>
                { details[key] }
            </td>
        )}
    </tr>
);

注意:您还可以使用 Object#entries获取键和值，或 Object#values只获取值。但是，Object#keys 有更多支持。

工作演示:

const RecordListDetail = ({ details }) => (
    <tr>
        {Object.keys(details).map((key) =>
            <td key={ key }>
                { details[key] }
            </td>
        )}
    </tr>
);

ReactDOM.render(
  <table>
    <tbody>
      <RecordListDetail details={{ a: 1, b: 2, c: 3 }} />
    </tbody>
  </table>,
  demo
);

td {
  border: 1px solid black;
}

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