反応データの要素にアンカータグやボタンを表示する方法

Question

私はReact wordに非常に新しいです。私は自分のページにデータを表示するために反応データコンポーネントを使用しています。

このデータテーブルにユーザー情報を表示していて、「編集」リンクを提供したいので、ユーザー情報を更新できます。

以下

が私のDataTable

姓アクション ジョン・ミシェル・編集 マーク・キューバン編集です

githubのドキュメントを1として、データ・テーブルには、単純に列プロパティを持つオブジェクト受け入れ、それに応じてデータをレンダリングします。 https://github.com/carlosrocha/react-data-components。

何か助けていただければ幸いです！

Answer 1

最後に私は考え出しました。誰かが同じ問題を抱えている場合、私は回答を掲示しています。私はgithubからこの例を見つけました：https://github.com/carlosrocha/react-data-components/blob/HEAD/example/table/main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { DataTable } from 'react-data-components'; 

function buildTable(data) { 
    const renderMapUrl = 
    (val, row) => 
     <a href={`https://www.google.com/maps?q=${row['lat']},${row['long']}`}> 
     Google Maps 
     </a>; 

    const tableColumns = [ 
    { title: 'Name', prop: 'name' }, 
    { title: 'City', prop: 'city' }, 
    { title: 'Street address', prop: 'street' }, 
    { title: 'Phone', prop: 'phone', defaultContent: '<no phone>' }, 
    { title: 'Map', render: renderMapUrl, className: 'text-center' }, 
    ]; 

    return (
    <DataTable 
     className="container" 
     keys="id" 
     columns={tableColumns} 
     initialData={data} 
     initialPageLength={5} 
     initialSortBy={{ prop: 'city', order: 'descending' }} 
     pageLengthOptions={[ 5, 20, 50 ]} 
    /> 
); 
} 

fetch('/data.json') 
    .then(res => res.json()) 
    .then((rows) => { 
    ReactDOM.render(buildTable(rows), document.getElementById('root')); 
    });