Question

我有一个反应组件，可以显示列表的详细信息..

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＃键有更多的支持。

工作演示：

＆＃13;

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
);

＆＃13;

td {
  border: 1px solid black;
}

＆＃13;

<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>

＆＃13;

react table Row组件

1 个答案: