如何在React Data Grid中創建鏈接？

我正在使用這個adazzle組件：https://github.com/adazzle/react-data-grid 如何在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知道如何解決這個問題？

來源

2017-02-13 kidcapital

好吧，你給了我一個好主意。您可以使用rowFormatter重新映射您想要的對象的屬性！謝謝！我的解決方案最終修改了我的rowGetter。

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

任何現在向下傳遞到formatter的值是一個對象。涼！

來源

2017-02-13 06:55:41 kidcapital

-1

這裏是我如何使它工作...自定義格式化程序指定並將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} 
    /> 

) 
}

來源

2017-07-06 22:39:36 user2052618

如何在React Data Grid中創建鏈接？

回答

相關問題