如何在reactjs中从class B中获取class A中的数据
How to get data in class A from class B in reactjs
这里我添加了两个 类 并想从一个 class 获取数据到另一个 class 但我收到这样的错误“警告:函数作为 React 无效child。如果您 return 组件而不是来自渲染,则可能会发生这种情况。或者您可能打算调用此函数而不是 return 它。"
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;
您需要在渲染方法中调用您的函数。
render() {
return this.DataHtmlStructure();
}
这里我添加了两个 类 并想从一个 class 获取数据到另一个 class 但我收到这样的错误“警告:函数作为 React 无效child。如果您 return 组件而不是来自渲染,则可能会发生这种情况。或者您可能打算调用此函数而不是 return 它。"
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;
您需要在渲染方法中调用您的函数。
render() {
return this.DataHtmlStructure();
}