Question

几个小时后，我阅读了如何绑定 this 。这是我第一次使用react，我已经检查了20多个有关stackoverflow的相关问题，但我无法解决问题。

我在guidelines之后安装了反应多转盘组件。

我只是复制并粘贴了“常用用法”代码，却遇到了这个烦人的错误：

TypeError: Cannot read property 'props' of undefined
Index
src/views/Index.js:107
  104 | responsive={responsive}
  105 | ssr={true} // means to render carousel on server-side.
  106 | infinite={true}
> 107 | autoPlay={this.props.deviceType !== "mobile" ? true : false}
      | ^  108 | autoPlaySpeed={1000}
  109 | keyBoardControl={true}
  110 | customTransition="all .5"

我试图遵循我发现的几乎所有答案（主要是绑定this）而没有成功。

这是我的代码：

import React from "react";

// reactstrap components
import {
  Container
} from "reactstrap";


import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

// core components
import ScrollTransparentNavbar from "components/Navbars/ScrollTransparentNavbar.js";
import IndexHeader from "components/Headers/IndexHeader.js";




const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
    slidesToSlide: 3, // optional, default to 1.
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
    slidesToSlide: 2, // optional, default to 1.
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
    slidesToSlide: 1, // optional, default to 1.
  },
};


function Index() {


  React.useEffect(() => {
    document.body.classList.add("index-page");
    document.body.classList.add("sidebar-collapse");
    document.documentElement.classList.remove("nav-open");
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
    return function cleanup() {
      document.body.classList.remove("index-page");
      document.body.classList.remove("sidebar-collapse");
    };
  });
  return (
    <>
      <ScrollTransparentNavbar />
      <div className="wrapper">
          <IndexHeader />
          <Carousel
            swipeable={false}
            draggable={false}
            showDots={true}
            responsive={responsive}
            ssr={true} // means to render carousel on server-side.
            infinite={true}
            autoPlay={this.props.deviceType !== "mobile" ? true : false}
            autoPlaySpeed={1000}
            keyBoardControl={true}
            customTransition="all .5"
            transitionDuration={500}
            containerClass="carousel-container"
            removeArrowOnDeviceType={["tablet", "mobile"]}
            deviceType={this.props.deviceType}
            dotListClass="custom-dot-list-style"
            itemClass="carousel-item-padding-40-px">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
            <div>Item 4</div>
          </Carousel>
        </div>
      </div>
    </>
  );
}

export default Index;

Answer 1

您没有定义props
功能组件中不需要this

const Index = (props) => { ...
// or
function Index(props) {...

autoPlay={props.deviceType ...

Answer 2

在功能组件中，您应该添加这样的道具

function Index(props) {
...
}

Answer 3

功能组件不通过this.props获取其道具，而是将其作为对象（该函数的第一个参数）获取。

function Index (props) {
  // ...
  return (
    // ...
      autoPlay={props.deviceType !== mobile}
  )
}

反应功能组件TypeError：无法读取未定义的属性'props'

3 个答案: