将数据从 class 组件传递到功能组件

Question

我的 class 组件具有数据并将其添加到

import React, {Component} from 'react';

export class EventsMap extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const data = this.props.data;
        console.log("data in events map", data)
....
....
...
                <PointsLayer data={data}/>

export default injectIntl(EventsMap);

尝试在我的功能组件 PointsLayer 组件中接收它：

import { useState, useEffect } from 'react';
import { loadModules } from 'esri-loader';
import multipoint from "@arcgis/core/geometry/Multipoint";



const PointsLayer = (props) => {
    const data = this.props.data;
    console.log("data in pointslayer", data);

我的“EventsMap”组件中的console.log显示了数据，但“PointsLayer”组件中的console.log未定义。是否可以将数据从 class 组件传递到功能组件？

Answer 1

我想你可以在 PointsLayer 中删除 this。 this 不需要引用功能组件中的 prop。

console.log("data in pointslayer", props.data);

Answer 2

您应该直接检查 props，因为您从 EventsMap 组件传递数据。

// You can find data in props.
console.log(props);
console.log("data in pointslayer", props.data);

将数据从 class 组件传递到功能组件

Passing data from a class component to a functional component

javascript

rxjs

reactjs

react-redux