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函数访问Header函数的 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: '',

        }
    }

我可以使用道具直接访问值

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);

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

3 个答案: