无法将ReactJS项目转换为React-Redux

如何解决无法将ReactJS项目转换为React-Redux

我是 React-Redux 的新手，我创建了一个ReactJS项目，并且试图将我的项目转换为React-Redux。我不知道怎么可能。

如果有人有任何想法，请建议我。

这是我的项目代码

import React,{ Component } from 'react';
import './accordion.css';

class Accordion extends Component {
    state = { active: '',height: '0px' };

    content = React.createRef();

    toggleAccordion = () => {
        this.setState({
            active: this.state.active === '' ? "active" : "non-active",height: this.state.active === 'active' ? "0px" : `${this.content.current.scrollHeight}px`,})
        console.log(this.content)
    }
    render() {
        return(
            <div>
                <button className={`accordion ${this.state.active}`} onClick={this.toggleAccordion}>
                    {this.props.title}
                </button>
                <div className="panel" ref={this.content} style={{maxHeight: `${this.state.height}`}}>
                    {this.props.content}
                </div>
            </div> 
        );
    }
}
export default Accordion;

这是我的沙箱

https://codesandbox.io/s/crazy-cache-1xg32?file=/src/App.js

解决方法

the code you posted有几个问题。

对于处理程序，您需要传递一个函数而不是调用它。在您的<Accordion>上，您具有：

toggleAccordion={this.props.setActive(
  this.props.active.toggle === "" ? "active" : "non-active"
)}

哪个调用了渲染功能，但实际上只希望在切换时调用该函数：

toggleAccordion={() => this.props.setActive(
  this.props.active.toggle === "" ? "active" : "non-active"
)}

引用不能作为prop传递给组件。您需要使用React库提供的forwardRef函数。
不知道这是怎么回事，但看起来setHeight实际上不是App组件中的道具吗？在mapDispatchToProps中，您只有setActive。最重要的是，为什么在这里尝试使用扩展运算符（...）？

{...this.props.setHeight(
  this.props.height.expand === "active"
    ? "0px"
    : `${this.content.current.scrollHeight}px`
)}