将自定义道具添加到组件实例（不是通过父级） - react-data-grid答案

【问题标题】：add custom prop to Component instance(not via parent) - react-data-grid将自定义道具添加到组件实例（不是通过父级） - react-data-grid
【发布时间】：2017-05-01 14:35:16
【问题描述】：

只是为了提供更广泛的背景 - 如果与后端同步，我的最终目标是使用“同步”图标增强可编辑单元格。

我继续尝试将自定义道具添加到特定的可编辑单元格，以指示syncedWithBackEnd = true/false，然后使用自定义格式化程序有条件地添加样式（如果与 DB 道具同步true）。 p>

问题是，
我未能将此自定义道具传递给 Cell 实例

目前尝试过：

为格式化程序提供回调并从外部调用它。找不到在 Formatter 实例上调用函数的方法（附加到特定单元格）
将 prop 设置为 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 来说也很陌生）。

【问题讨论】：

标签： javascript reactjs react-data-grid

【解决方案1】：

当实际同步发生时（在想要更新您的自定义单元之前）我假设它是通过回调完成的？如果是这样，那么执行远程 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(); }
         }
       } 
    }

不确定这是否有帮助，但可能会让你开始

【讨论】：