reactjs - 从哑子 react React Redux更新状态

有什么办法可以从哑子组件更新父状态？我有一个有孩子（标题和正文）的网格布局，我想让fo使用标题作为输入的过滤器。我使用父组件将网格连接到db，然后将所有数据向下传递到主体和标题，但是我想从标题到连接的智能组件获取过滤器。我发现的唯一方法是连接GridHeader来存储数据并将数据直接传递给它。

我的solutoin问题是我想在具有不同数据类型的不同页面中使用网格，因此我需要使所有网格组件变得笨拙。使用我的解决方案，我必须为每种数据/表类型编写特定的GridHeader并将每个标头连接到不同的存储键。一个将连接到catalog: store.catalog第二个将连接到users: store.users等...
我的解决方案不是干的，我不喜欢它：/请帮助

这是我的GridHeader：

import React from 'react';

import { connect } from 'react-redux';
import { filterCatalog, setFilters } from '../../redux/actions/catalogActions';

@connect((store) => {
    return {
        catalog: store.catalog
    };
})
export default class GridHeader extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        const name = e.target.name;
        let filters = {
            [name]: e.target.value
        }
        this.props.dispatch(setFilters(filters))
    }

    handleSubmit(e) {
        if (e.which == 13){
            e.target.blur();
            //console.log('submit', this.props.catalog.filters)
            this.props.dispatch(filterCatalog(this.props.catalog.filters))
        }
    }

    render() {
        const headerItem = this.props.headers.map((x) => {
            return (
                <th class={x.class} key={x.name}>
                <div class="input-field">
                    <input type={x.type} id={x.id} name={x.name} placeholder={x.placeholder} class={x.class} disabled={x.disabled} onChange={this.handleChange} onKeyPress={this.handleSubmit}/>
                    <label for={x.name}>{x.label}</label>
                </div>
                <a class="filter-button hidden">
                    <i class="material-icons">backspace</i>
                </a>
            </th>
            )
        });

        return (
            <thead>
                <tr>
                    {headerItem}
                </tr>
            </thead>
        );
    }
}

最佳答案

您可以创建包装器组件，该组件将为GridHeader提供数据。例如：

第一次使用

@connect((store) => {
  return {
      catalog: store.catalog
  };
})
export default class FirstWrapperGridHeader extends React.Component {
  render() {
    <GridHeader {...props} />
  }
}

第二次用法：

@connect((store) => {
  return {
      catalog: store.anotherData
  };
})
export default class SecondWrapperGridHeader extends React.Component {
  render() {
    <GridHeader {...props} />
  }
}

您的GridHeader应该没有连接到redux存储，应该只是哑巴。