如何替换道具的jsx substring - 反应

Question

我正在尝试创建一个共享表组件。 而且，在这张桌子上，我试图让那些编辑 url 动态。 代码很简单，看起来像：

const actionColumn = (
    <Link
        to={`/suppliers/ROW_ID/edit`}
        className="btn btn-info btn-xs"
        title="Edit"
    >
        <i className="fas fa-pencil-alt"></i>
    </Link>
);

    <Table
        actionColumn={actionColumn}
    />

现在在桌子上，我想用ROW_ID替换row.id

{list &&
    list.map((row, i) => (
         <tr>
            <td>
                {actionColumn.replace(
                    "ROW_ID",
                    row.id
                )}
            </td>
        </tr>
    ))}

我尝试使用.replace但收到错误： actionColumn.replace is not a function

Answer 1

首先你需要让 ActionColumn 成为一个接受 id 作为 props 的组件...然后导出组件

const ActionColumn = ({ id }) => (
    <Link
        to={`/suppliers/${id}/edit`}
        className="btn btn-info btn-xs"
        title="Edit"
    >
        <i className="fas fa-pencil-alt"></i>
    </Link>
);

export default ActionColumn;

在此组件中，您导入 ActionColumn 组件并将 row.id 传递给它

{list &&
    list.map((row, i) => (
            <td>
                <ActionColumn id={row.id} />
            </td>
    ))}

Answer 2

制作一个 function 代替，将to道具传递给链接：

const ActionColumn = ({ to }) => (
    <Link
        to={to}
        className="btn btn-info btn-xs"
        title="Edit"
    >
        <i className="fas fa-pencil-alt"></i>
    </Link>
);

对于您的原始布局，您可以使用

<ActionColumn to={`/suppliers/ROW_ID/edit`} />

要进行不同的渲染，请传递不同的道具：

list.map((row, i) => (
    <td>
        <ActionColumn to={`/suppliers/${row.id}/edit`} />
    </td>
))

另请注意，您需要平衡<tr>标签； 您目前有一个</tr>但没有匹配的<tr> 。