将自定义道具添加到组件实例(不是通过父级)-react-data-grid
add custom prop to Component instance(not via parent) - react-data-grid
只是为了提供更广泛的背景 -
如果与后端同步,我的最终目标是使用 "synced" 图标增强可编辑单元格。
我继续尝试将自定义道具添加到特定的可编辑单元格,以指示 syncedWithBackEnd = true/false
,然后使用自定义格式化程序有条件地添加样式(如果与 DB 道具同步为 true).
问题是,
我未能将此自定义道具传送到 Cell 实例
目前已尝试:
为Formatter提供回调,从外部调用。找不到在 Formatter 实例(附加到特定单元格)上调用函数的方法
将道具设置为 handleRowUpdated
逻辑的一部分。设置自定义道具但未到达单元格:
var rows = this.getRows();
...
// e.updated.customProp = "whatever" ---> fails to reach Cell
Object.assign(rows[e.rowIdx], e.updated);
this.setState({rows: rows});
关于如何实现这个的任何想法?
或者也许有一些明显的方法可以达到我完全错过的最终目标(必须提到我是 React 的新手,而且通常是 js 的新手)。
当实际同步发生时(在想要更新您的自定义单元格之前)我假设它是通过回调完成的?如果是这样,那么您执行远程 ajax 调用以更新值的回调可以更新 this.state.rows.customProp (this.state.rows.whatever.customProp) 并且一旦状态发生变化并假设您的 getRows() 正在获取从 this.state.rows 然后它会自动发生。更糟糕的情况是,您可能必须在更改状态值后添加对 this.forceupdate() 的调用。这是基于我拥有的听起来相似且有效的东西...
//column data inside constructor (could be a const outside component as well)
this.columnData = [
{
key: whatever,
name: whatever,
...
formatter: (props)=>(<div className={props.dependentValues.isSynced? "green-bg" : "")} onClick={(evt)=>this.clickedToggleButton} >{props.value}</div>),
getRowMetaData: (data)=>(data),
},
...
}
]
这是我的数据网格包装器组件中的回调函数...
//when a span
clickedToggleButton(evt, props){
//do remote ajax call we have an ajax wrapper util we created so pseudo code...
MyUtil.call(url, params, callback: (response)=>{
if(this.response.success){
let rows = this.state.rows;
let isFound = false;
for(let obj of rows){
if(obj.id==props.changedId){
obj.isSynced = true;
isFound = true;
break;
}
}
//not sure if this is needed or not...
if(isFound){ this.forceUpdate(); }
}
}
}
不确定这是否有帮助,但可能会让您入门
只是为了提供更广泛的背景 - 如果与后端同步,我的最终目标是使用 "synced" 图标增强可编辑单元格。
我继续尝试将自定义道具添加到特定的可编辑单元格,以指示 syncedWithBackEnd = true/false
,然后使用自定义格式化程序有条件地添加样式(如果与 DB 道具同步为 true).
问题是,
我未能将此自定义道具传送到 Cell 实例
目前已尝试:
为Formatter提供回调,从外部调用。找不到在 Formatter 实例(附加到特定单元格)上调用函数的方法
将道具设置为
handleRowUpdated
逻辑的一部分。设置自定义道具但未到达单元格:var rows = this.getRows(); ... // e.updated.customProp = "whatever" ---> fails to reach Cell Object.assign(rows[e.rowIdx], e.updated); this.setState({rows: rows});
关于如何实现这个的任何想法?
或者也许有一些明显的方法可以达到我完全错过的最终目标(必须提到我是 React 的新手,而且通常是 js 的新手)。
当实际同步发生时(在想要更新您的自定义单元格之前)我假设它是通过回调完成的?如果是这样,那么您执行远程 ajax 调用以更新值的回调可以更新 this.state.rows.customProp (this.state.rows.whatever.customProp) 并且一旦状态发生变化并假设您的 getRows() 正在获取从 this.state.rows 然后它会自动发生。更糟糕的情况是,您可能必须在更改状态值后添加对 this.forceupdate() 的调用。这是基于我拥有的听起来相似且有效的东西...
//column data inside constructor (could be a const outside component as well)
this.columnData = [
{
key: whatever,
name: whatever,
...
formatter: (props)=>(<div className={props.dependentValues.isSynced? "green-bg" : "")} onClick={(evt)=>this.clickedToggleButton} >{props.value}</div>),
getRowMetaData: (data)=>(data),
},
...
}
]
这是我的数据网格包装器组件中的回调函数...
//when a span
clickedToggleButton(evt, props){
//do remote ajax call we have an ajax wrapper util we created so pseudo code...
MyUtil.call(url, params, callback: (response)=>{
if(this.response.success){
let rows = this.state.rows;
let isFound = false;
for(let obj of rows){
if(obj.id==props.changedId){
obj.isSynced = true;
isFound = true;
break;
}
}
//not sure if this is needed or not...
if(isFound){ this.forceUpdate(); }
}
}
}
不确定这是否有帮助,但可能会让您入门