Question

我有一个问题，我想添加以下命令行：

Cell: ({ row }) => <a href={row.original.lastName}>{row.original.lastName}</a>

使用reactjs中的钩子转换为“ lastName”，例如：

之前：

const [columns, setColumns] = useState(
[
  {
    id:'firstName',   
    Header: 'First Name',
    accessor: 'firstName',
  },

  {
    Header: 'Last Name',
    accessor: 'lastName',
   },
]
);

setColumns(???)

结果：

[
   {
     id:'firstName',   
     Header: 'First Name',
     accessor: 'firstName',
   },

   {
     Header: 'Last Name',
     accessor: 'lastName',
     Cell: ({ row }) => <a href={row.original.lastName}>{row.original.lastName}</a>
    },
 ]

最好的问候朱塞佩

Answer 1

请找到以下小型工作解决方案。请随时将按钮单击替换为副作用，可以是API调用或任何操作副作用。为了简单起见，我使用了一个按钮。

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Row = ({ row }) => (
  <a href={row.original.lastName}>{row.original.lastName}</a>
);

function App() {
  const [columns, setColumns] = useState([
    {
      id: "firstName",
      Header: "First Name",
      accessor: "firstName"
    },

    {
      Header: "Last Name",
      accessor: "lastName"
    }
  ]);

  const createRowsForLastName = () => {
    const replaceColumnForLastName = columns.map(column => {
      if (column.accessor === "lastName") {
        return {
          ...column,
          Cell: <Row row={{ original: { lastName: "some name" } }} />
        };
      }

      return { ...column };
    });

    setColumns(replaceColumnForLastName);
  };

  console.log(columns);
  return (
    <div className="App">
      <button onClick={createRowsForLastName}>Create Row!</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

使用挂钩将Link放入json（反应）

1 个答案: