React 将函数转换为类，并从函数调用变量到类

Question

我是 React 的新手.js，我需要将函数转换为类，然后我需要从另一个函数调用变量到类

import React from 'react';
import {connect} from 'react-redux';
import {NavLink} from 'react-router-dom';
const Header = ({cartLength}) => {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div className="container">
<NavLink className="navbar-brand" to="/">Ecommerce</NavLink>
<div>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink className="nav-link" to={"/cart"}><i className="fa fa-shopping-cart mr-2"
    aria-hidden="true" />Cart {cartLength ? `(${cartLength})`: ''}</NavLink>
</li>
</ul>
</div>
</div>
</nav>
);
};

const mapStateToProps = (state) => {
return {
cartLength: state.shop.cart.length
}
};
export default connect(mapStateToProps, null)(Header);

从上面的代码 我正在访问从mapStateToProps函数到标题函数的cartLength值，

现在我正在将函数转换为类

const Header = ({cartLength}) => {

自

class Header extends React.Component {

我修改的代码

import React from 'react';
import {connect} from 'react-redux';
import {NavLink} from 'react-router-dom';

// const Header = ({ cartLength }) => {
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
cartLength: '',
}
}


render() {
console.log(" cartlength from main class:", this.state.cartLength, this.props.cartLength)
return (
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div className="container">
<NavLink className="navbar-brand" to="/">Ecommerce</NavLink>
<div>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink className="nav-link" to={"/cart"}><i className="fa fa-shopping-cart mr-2" aria-hidden="true" />Cart {this.state.cartLength ? `(${this.state.cartLength})` : ''}</NavLink>
</li>
</ul>
</div>
</div>
</nav>
);
};

const mapStateToProps = (state) => {
return {
cartLength: state.shop.cart.length
}
};
export default connect(mapStateToProps, null)(Header);

我需要从mapStateToProps函数到Header类的cartLength值， 如何访问

如果有人知道解决方案，请告诉我..

Answer 1

cartLength在props中可用。您可以将this.state.cartLength更改为this.props.cartLength，或者在构造函数中可以这样做：

Edited:
this.state = {
cartLength: props.cartLength
}

Answer 2

cartLength 的值不需要添加到状态中，可以直接从 props 中使用。

import React, { Component } from "react";
import { connect } from "react-redux";
import { NavLink } from "react-router-dom";
class Header extends React {
render() {
const { cartLength } = this.props;
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div className="container">
<NavLink className="navbar-brand" to="/">
Ecommerce
</NavLink>
<div>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink className="nav-link" to={"/cart"}>
<i className="fa fa-shopping-cart mr-2" aria-hidden="true" />
Cart {cartLength || ""}
</NavLink>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
const mapStateToProps = (state) => {
return {
cartLength: state.shop.cart.length,
};
};
export default connect(mapStateToProps, null)(Header);

如果您仍然没有获得 cartLength 的值，请在 mapStateToProps 中控制台该值，并检查您是否从商店中的正确状态获取它。

const mapStateToProps = (state) => {
console.log('state',state);
return {
cartLength: state.shop.cart.length,
}
}

Answer 3

我通过使用得到了解决方案this.props.cartLength

现在我可以从mapStateToProps获取cartLength值，我没有提到任何值

constructor(props) {
super(props);
this.state = {
// cartLength: '',
}
}

我可以直接使用 props 访问值

import {connect} from 'react-redux';
import {NavLink} from 'react-router-dom';

// const Header = ({ cartLength }) => {
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
// cartLength: '',
}
}


render() {
console.log(" cartlength from main class:", this.state.cartLength, this.props.cartLength)
return (
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div className="container">
<NavLink className="navbar-brand" to="/">Ecommerce</NavLink>
<div>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink className="nav-link" to={"/cart"}><i className="fa fa-shopping-cart mr-2" aria-hidden="true" />Cart {this.props.cartLength ? `(${this.props.cartLength})` : ''}</NavLink>
</li>
</ul>
</div>
</div>
</nav>
);
};

const mapStateToProps = (state) => {
console.log(state, 'state has changed');
return {
cartLength: state.shop.cart.length
}
};
export default connect(mapStateToProps, null)(Header);