如何从reactj中的B类中获取A类数据
在这里,我添加了两个类,想将数据从一个类获取到另一个类,但是我会遇到这样的错误“警告:功能无效作为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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您需要在渲染方法中调用您的功能。
You need to invoke your function in your render method.