React Data Gridでリンクを作成するには？

Question

私はこの広告のコンポーネントを使用しています：https://github.com/adazzle/react-data-grid

私はクリック可能なリンクを作成する方法を理解しようとしています。ここにはセルフォーマッタの例があります：http://adazzle.github.io/react-data-grid/examples.html#/custom-formatters

ただし、フォーマッタは単一の値を渡すだけです。フォーマッタは、それだけに渡された値を取得するので、私は形式でリンクを作成する方法がありません：

const formatter = ({ value }) => (
    <a href=`${value.id}`>{value.name}</a> 
) 

上記のコードに問題が値がオブジェクトありません。これは、単一の文字列などを渡すだけです

react-data-gridを使用している人は、この問題の解決方法を知っていますか？

Answer 1

あなたは私に素晴らしいアイデアをくれました。 rowFormatterを使用して、オブジェクトに必要なプロパティを再マップすることができます。ありがとう！私の解決策は、私のrowGetterを修正してしまった。

const rowGetter = (i) => { 
    const row = Object.assign({}, person[i]); 
    row.name = person[i]; 
    return row; 
    }; 

ここで値をformatterに渡すと、オブジェクトになります。クール！

Answer 2

ここでは、カスタムフォーマッタを指定して動作させる方法と、getRowMetaData属性を列定義に追加する方法を示します。 getRowMetaData値のデータに小道具を追加することもできます。

const MyFormatter = React.createClass({ 
    render(){ 
    return(
     <a href={this.props.dependentValues.url}>{this.props.dependentValues.name}</a> 
    ); 
    } 
}); 


function MyFunctionalDataTable(props){ 
    const myCols = [ 
    {key: "link", name: "Link", width: 200, formatter: MyFormatter, getRowMetaData: (data)=>(data)}, 
    ... 
    ]; 

    const createRowData = !props.mydata? '' : 
    props.mydata.map(function(obj, index){ 
     ... 
     return {"blah": obj.blah, 
       "url": obj.url, //doesn't have to match a GUI column 
       "name": obj.name, //doesn't have to match a GUI column 
       "column2stuff": obj.blahblah, 
     } 
    }); 

    const rowGetter = rowNumber => createRowData[rowNumber]; 


    return (
    <ReactDataGrid 
     columns={myCols} 
     rowGetter={rowGetter} 
     rowsCount={createRowData.length} 
     headerRowHeight={35} 
     rowHeight={35} 
     minHeight={createRowData.length<15? (37+(35*createRowData.length)) : 500} 
    /> 

) 
}