Javascript 如何替换props-react的jsx子字符串

我正在尝试创建一个共享表组件。在这个表中，我试图使这些编辑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>
);

---

我试图使用

.replace

但收到一个错误：

actionColumn.replace不是一个函数

而是一个函数，它将

传递到

属性以传递到链接：

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

const ActionColumn=（{to}）=>(
);

对于原始布局，可以使用

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

要以不同方式渲染，请传递不同的道具：

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

list.map（（行，i）=>(
))

---

还要注意，您需要平衡您的

标签；您当前有一个

，但没有匹配的

首先，您需要使ActionColumn成为一个接受id作为道具的组件。。。然后导出组件

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;

const ActionColumn=（{id}）=>(
);
导出默认操作列；

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

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

{list&&
list.map（（行，i）=>(
))}

一个简单的方法就是将

actionColumn

作为函数，并将行ID作为参数传递：

const actionColumn=（row\u ID）=>（…）

然后

{actionColumn（row.ID）}

。或者将

actionColumn

设为行ID为0的组件，先生，您能帮我解决这个问题吗

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;

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