Question

我有一个react组件，可以从此代码中为表中的行呈现<tr>和<td>：

import React from 'react';

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

<tr>
  {delete details.owner}
  {delete details._id}

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

这是我用道具传递的数据。

{
campaign: "Charles",
company_ID :"1"
coreURL :"http://test88.com",
Url2 :” http://test88.com/verylong/verylong/other/other/url",
Url3 : “http://test88.com/user",
updatedAt :"2017-11-06T20:44:14.027Z”,
createdAt :"2017-11-06T20:44:14.027Z",
medium :”twitter"
}

其中一些字段可能不存在于每个过程中（因此采用编程方法）但是我确实需要为每个属性添加特定格式（如果存在）。

此格式包括：

使用时刻格式化日期，
制作网址链接（同时删除显示中的http：//元素），
截断非常长的网址，并且只有翻转模式中显示的完整网址

非常感谢

Answer 1

首先，不要从道具中删除密钥，也不要以任何其他方式更改密钥。这很可能会引发问题。

否则，这样的事情可能有效：

function buildTd(key, value) {
    let content;
    let width = "10%"; // default
    switch (key) {
        case "medium": 
            content = <b>{value}</b>; 
            break;
        case "coreURL": 
        case "Url2":
            content = <a href={value}>{shortenUrl(value)}</a>;
            width = "20%";
            break;
        // etc, leave out those you don't want like owner or _id
    }

    return content && <td key={key} width={width}>{content}</td>;
}

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

React：以编程方式创建表

1 个答案: