如何在 Meteor + React App 中输入 Griddle 设置图标组件可重用

Question

如果可能，请提供意见。如果可以的话怎么办？

Aim - 使用 Griddle 版本 0.6.1

将 Griddle 中的设置按钮替换为 material ui 按钮

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

  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 只接受 object/string 作为输入而不响应 class，那就是为什么不能把它变成一个单独的组件

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

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

Answer 1

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

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

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

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

this.mygriddle.toggleColumnChooser();

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

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

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

干杯

如何在 Meteor + React App 中输入 Griddle 设置图标组件可重用

How to make input to Griddle settingIconComponent resusable in Meteor + React App

meteor

reactjs

meteor-react

material-ui

griddle