reactjs 反应表中的动态列和值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48748803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic column and values in react table
提问by Vik
response : {initial_data: [{
"Did I see this plant in 2016?"=>"No",
"Did I see this plant in 2017?"=>"Yes",
"How Many?"=>1,
"User Data 4"=>"x",
"User Data 5"=>nil,
"Did I see this plant in 2022?"=>"No",
"Name"=>"Abronia alpina"},
{"Did I see this plant in 2016?"=>"No",
"Did I see this plant in 2017?"=>"No",
"How Many?"=>11,
"User Data 4"=>"x",
"User Data 5"=>nil,
"Did I see this plant in 2022?"=>"Yes",
"Name"=>"Abronia alpina1"}]
}
Based on above response I am executing below code to print the header and there values dynamically.
基于上面的响应，我正在执行下面的代码来动态打印标题和那里的值。
const CUSTOM_COLUMNS = (Object.keys(props.initial_data[0].map((item, index) => [{ id: 'user_data', Header: item, headerClassName: 'family-header', accessor: item, className: 'centered capitalize', show: true }][0] )); const columns = [ ...CUSTOM_COLUMNS, { Header: 'Actions', accessor: 'id', show: true, className: 'centered', Cell: (props) => ( <span className="label label-danger link" onClick={this.deletePlant.bind(this, props.value)}> <i className="fa fa-trash"></i> Delete </span> ) } ];
const CUSTOM_COLUMNS = (Object.keys(props.initial_data[0].map((item, index) => [{ id: 'user_data', Header: item, headerClassName: 'family-header', accessor: item, className: 'centered capitalize', show: true }][0] )); const columns = [ ...CUSTOM_COLUMNS, { Header: 'Actions', accessor: 'id', show: true, className: 'centered', Cell: (props) => ( <span className="label label-danger link" onClick={this.deletePlant.bind(this, props.value)}> <i className="fa fa-trash"></i> Delete </span> ) } ];
I able to correctly print the header dynamically, but my values are not coming dynamically and it's displaying my last hash key values in each column.
我能够正确地动态打印标题，但我的值不是动态出现的，它在每一列中显示我的最后一个哈希键值。
My header should be :
我的标题应该是：
["Did I see this plant in 2016?", "Did I see this plant in 2017?", "How Many?", "User Data 4", "User Data 5", "Did I see this plant in 2022?", "Name"]
and row values should be:
和行值应该是：
Row1 : ["No", "Yes", 1, "x", "", "No", "Abronia alpina"]
Row1 : ["No", "No", 11, "x", "", "Yes", "Abronia alpina1"]
Can you please help me to get it dynamically, or let me know what I am doing wrong here. I am new in react so maybe i am missing here so please correct me.
你能帮我动态获取它吗，或者让我知道我在这里做错了什么。我是 React 新手，所以也许我在这里失踪了，所以请纠正我。
回答by Dev
If you are using react-table, to render the table, I think your logic of creating columns is wrong. It should be something like this.
如果您使用react-table来呈现表格，我认为您创建列的逻辑是错误的。它应该是这样的。
const columns = Object.keys(response.initial_data[0]).map((key, id)=>{
return {
Header: key,
accessor: key
}
})
I have tried to create a snippet with your data. Let me know if this helps.
我试图用你的数据创建一个片段。如果这有帮助，请告诉我。
const ReactTable = window.ReactTable.default
const response = {
initial_data: [
{
"Did I see this plant in 2016?":"No",
"Did I see this plant in 2017?":"Yes",
"How Many?":1,
"User Data 4":"x",
"User Data 5":"",
"Did I see this plant in 2022?":"No",
"Name":"Abronia alpina"
},
{
"Did I see this plant in 2016?":"No",
"Did I see this plant in 2017?":"No",
"How Many?":11,
"User Data 4":"x",
"User Data 5":"",
"Did I see this plant in 2022?":"Yes",
"Name":"Abronia alpina1"
}]
}
class App extends React.Component {
render() {
const data = response.initial_data
const columns = Object.keys(response.initial_data[0]).map((key, id)=>{
return {
Header: key,
accessor: key
}
})
return <ReactTable
data = { data }
columns = { columns }
/>
}
}
ReactDOM.render( < App / > , document.getElementById("app"))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.css"></link>
<div id="app"></div>回答by Shubham Khatri
With React-Tableyou header must have a accessor and your data must be mapped with accessor as the key
随着React-Table你头必须有一个访问你的数据必须访问的关键映射
You would create your columns like
你会创建你的列
getColumns() {
return Object.keys(data.initial_data[0]).map(key => {
return {
Header: key,
accessor: key
};
});
}
and you Table can then look like
然后你的表看起来像
class App extends React.Component {
getColumns() {
return Object.keys(data.initial_data[0]).map(key => {
return {
Header: key,
accessor: key
};
});
}
render() {
const columns = this.getColumns();
console.log(data.initial_data);
return (
<div>
<ReactTable
data={data.initial_data}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
<Tips />
<Logo />
</div>
);
}
}
According to documentation:
根据文档：
accessor: 'propertyName', // or Accessor eg. (row) => row.propertyName
Accessorsare functions that return the value to populate the row's value for the column. This lets the render function not have to worry about accessing the correct data, the value is automatically populated in it's props.If a string or array is passed the default accessor is used. The default accessor will parse the input into an array and recursively flatten it. Any values that contain a dot (.) will be split. Any values that contain bracket ([]) will be split. This array is then used as the path to the value to return.
Accessors是返回值以填充列的行值的函数。这让渲染函数不必担心访问正确的数据，该值会自动填充到它的 props 中。如果传递字符串或数组，则使用默认访问器。默认访问器会将输入解析为数组并递归地将其展平。任何包含点 (.) 的值都将被拆分。任何包含括号 ([]) 的值都将被拆分。然后将此数组用作要返回的值的路径。
