我们如何在React-Redux中使用Refs？

Question

我正在做一个手风琴项目，我想通过单击其中一个按钮来滚动按钮的高度。为此，我使用了Refs，它在 React 中可以正常工作，但是我必须在 React-Redux 中使用Refs，但这不起作用。

任何人都可以对此问题提出建议，请分享

这是我的减速器，通过单击以下按钮可以滚动每个按钮的高度：

import * as actionTypes from '../actions/actions';

const initialState = {
    active: false,
    height: '0px'
}
const reducer = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.ACTIVE_STATE:
            return {
                ...state,
                active: state.active === false ? true : false,
                height: state.active === true ? '0px' : `${this.content.current.scrollHeight}`   <---
            }
        default:
    }
    return state; 
}
export default reducer;

这是我创建参考文件的手风琴组件：

import React, { Component, forwardRef } from 'react';
import { connect } from 'react-redux';
import * as actionTypes from '../store/actions/actions';

class Accordion extends Component {
    
    content = React.createRef();    <---
    render() {
        return (
            <div>
                <button className={`accordion ${this.props.accordions.active}`}
                onClick={this.props.expandAccordion} >
                    {this.props.title}
                </button>
                <div className="panel">
                    {this.props.content}
                </div>
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        accordions: state.data
    };
}
const mapDispatchToProps = (dispatch) => {
    return {
        expandAccordion: () => dispatch({type: actionTypes.ACTIVE_STATE})
    };
}
export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Accordion);

每一个建议或意见都可以帮助我。

随时分享您的想法