0

如果可能，请提供输入。如果可能的话怎么办？

目标- 使用 Griddle 版本 0.6.1 将 Griddle 中的设置按钮替换为 Material ui 按钮

实施- 替换显示可供选择的列列表的设置按钮。我将此输入提供给 Griddle 的 settingIconCompoent 道具

  getSettings() {
    return (
        <div>
          <RaisedButton
              label='Columns'
              style={{marginTop: 28}}
              primary={true}></RaisedButton>
       </div>)
  },

和我插入此设置功能的烤盘是

   <Griddle
          ref={(ref) => {this._griddle = ref}}
          useGriddleStyles={false}
          columnMetadata={columnMeta}
          results={this.getData()}
          resultsPerPage={10}
          tableClassName='table'    
          showSettings={true}
          settingsText={''}
          settingsToggleClassName={'text-hide'}
          settingsIconComponent={this.getSettings()}
          columns={[
            'actions','name', 'age', 'city',
            'school', 'totalFamilyMembers',]}/>

它正在工作。

问题- 我必须替换 10 页中的设置按钮，但 Griddle 中的 settingsIconCompoent 只接受对象/字符串作为输入而不接受反应类，这就是为什么不能将其变成单独的组件的原因

如何使它作为一个单独的实体在所有这些页面中使用而不重复

干锅页面 - https://griddlegriddle.github.io/v0-docs/styling.html

4

1 回答 1

0

是否有一些研究和 Griddle 版本 1.0 提供了一个开箱即用的设置组件，所以如果可能的话使用它

但这里是 Griddle 版本 0.x。这就是我所做的。为 Griddle 组件创建了一个引用

<Griddle
  ref = {(ref) => {this.mygriddle = ref}}>

现在我们可以调用函数 toggleColumnChooser 来控制显示所有列的面板的打开和关闭

this.mygriddle.toggleColumnChooser();

基于此我们可以打开和关闭并完全隐藏设置按钮

使用此按钮创建一个新组件并通过调用切换列面板的函数来使用它

希望这对谁需要解决方案有意义

干杯

于 2017-03-14T12:58:42.783 回答