如何从reactj中的B类中获取A类数据

发布于 2025-01-29 18:12:51 字数 1384 浏览 4 评论 0原文

在这里,我添加了两个类,想将数据从一个类获取到另一个类,但是我会遇到这样的错误“警告:功能无效作为React子女。您是要调用此功能而不是返回它。”

import React, { Component } from 'react';
import DataHtml from "../datahtml";


export default class AllData extends Component {
    render(){
        return (
            <div className="row g-6 g-xl-9">
                <DataHtml />
            </div>
        );
    }
}


import React, { Component } from 'react';

class DataHtml extends Component {
    constructor(props) {
        super(props)

        this.state = {
            data: [ {"name": "demo","date": "02-02-2022"},{"name": "demo","date": "02-02-2022"}]        
            }
    }

    DataHtmlStructure = () => {
        this.state.data.map((data) => {
            return (
                <div className="col-md-6 col-xl-4 test-card">
                    <div className="card-body p-9 pt-4">
                        <div className="fs-3 fw-bolder text-dark mb-1">{data.name}</div>
                        <div className="fs-5 text-gray-600">
                            <i className="bi bi-calendar-date-fill"></i>{data.date}
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {
        return this.DataHtmlStructure;
    }
}
export default DataHtml;

Here I added two Classes and want to get data from one class to another class but I am getting errors like this "Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it."

import React, { Component } from 'react';
import DataHtml from "../datahtml";


export default class AllData extends Component {
    render(){
        return (
            <div className="row g-6 g-xl-9">
                <DataHtml />
            </div>
        );
    }
}


import React, { Component } from 'react';

class DataHtml extends Component {
    constructor(props) {
        super(props)

        this.state = {
            data: [ {"name": "demo","date": "02-02-2022"},{"name": "demo","date": "02-02-2022"}]        
            }
    }

    DataHtmlStructure = () => {
        this.state.data.map((data) => {
            return (
                <div className="col-md-6 col-xl-4 test-card">
                    <div className="card-body p-9 pt-4">
                        <div className="fs-3 fw-bolder text-dark mb-1">{data.name}</div>
                        <div className="fs-5 text-gray-600">
                            <i className="bi bi-calendar-date-fill"></i>{data.date}
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {
        return this.DataHtmlStructure;
    }
}
export default DataHtml;

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

站稳脚跟 2025-02-05 18:12:51

您需要在渲染方法中调用您的功能。

    render() {
        return this.DataHtmlStructure();
    }

You need to invoke your function in your render method.

    render() {
        return this.DataHtmlStructure();
    }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文