如何在Meteor + React应用程序中实现网格化settingIconComponent的输入

Question

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

Aim -使用GridVersion0.6.1将网格中的设置按钮替换为material按钮

Implementation -替换“设置”按钮，该按钮显示要选择的列列表。我正在为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',]}/>

起作用了。

Problem -我必须在10页中替换“设置”按钮，但是Griddle中的settingsIconCompoent只接受对象/字符串作为输入，而不响应类，这就是为什么不能将它变成单独的组件。

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

网格页面- https://griddlegriddle.github.io/v0-docs/styling.html

Answer 1

做了一些研究，GridVersion1.0提供了一个现成的设置组件，因此，如果可能的话，请使用

但是这里是GridleVersion0.x。我就是这么做的。创建了一个ref以网格化组件

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

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

this.mygriddle.toggleColumnChooser();

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

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

希望这对谁需要解决是有意义的。

干杯