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

Question

I am trying to create a shared table component. And, on this table I am trying to make those edit url dynamic. Code is straight forward and loos like:

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

Now on the table, I want to replace ROW_ID with the row.id

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

I tried to use .replace but received an error: actionColumn.replace is not a function

Answer 1

First you need to make ActionColumn a component that accepts the id as props... Then export the component

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;

In this component, you import the ActionColumn component and pass the row.id to it

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

Answer 2

Make a function instead, one that takes the to prop to pass to the Link:

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

For your original layout, you can use

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

To render differently, pass a different prop:

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

Also note that you need to balance your <tr> tags; you currently have a </tr> but no matching <tr> .