我正在运行客户端和服务器设置(react和axios api调用)我想了解如何从React Framework中的子组件访问返回的数据。我有连接工作到http服务器,但我缺乏使用this.state或道具的基础知识。
这里实际上是我的app.js
import React, { Component } from 'react';
import axios from 'axios';
import ChildComponent from "./components/childComponent"
class App extends Component {
state = {
data: [],
intervalIsSet : false
};
componentDidMount() {
this.getDataFromDb();
if (!this.state.intervalIsSet) {
let interval = setInterval(this.getDataFromDb, 10000);
this.setState({ intervalIsSet: interval });
}
}
getDataFromDb = () => {
fetch("http://localhost:3001/api/getData")
.then(data => data.json())
.then(res => this.setState({ data: res.data }));
};
render() {
const { data } = this.state;
return (
<div>
<childComponent />
</div>
);
};
}
export default App;
这是儿童组件。 - >我的目的是简单地从子组件中访问(或打印出)来自服务器的返回数据。
从'react'导入React,{Component};
class ChildComponent extends React.Component {
render() {
return (
{this.props.data}
);
}
}
export default ChildComponent;
首先要确保你uppercase
ChildComponent
的第一个字母。如果要传递数据,则应将该对象作为属性添加到component
,然后通过this.props
访问它。你还需要渲染一个顶部元素,如果你不需要div
或任何其他html元素,你可以用React.Fragment
包装它。
关于data
,如果它是一个数组,你可以通过它简单地map
并返回你想要看到的数据,如果你想要整个对象显示为一个字符串,你可以使用JSON.stringify()
。如果这是一个object
,你只能显示你想要的数据。
class App extends React.Component {
//...
render() {
const { data } = this.state;
return (
<div>
<ChildComponent data={data} />
</div>
);
}
}
//for array, ex: data = ["first","name"];
class ChildComponent extends React.Component {
render() {
return (
<React.Fragment>
{this.props.data.map(item =>
<p>{item}</p>
)}
</React.Fragment>
);
}
}
//for object, ex: data = {id: 1, name: 'John'};
class ChildComponent extends React.Component {
render() {
const {data} = this.props;
return (
<React.Fragment>
<p>{data.id}</p>
<p>{data.name}</p>
</React.Fragment>
);
}
}
//for single value (string, int, etc), ex: data = "my name";
class ChildComponent extends React.Component {
render() {
return (
<React.Fragment>
<p>{this.props.data}</p>
</React.Fragment>
);
}
}
//to show object as a string (could be any object mentioned before)
class ChildComponent extends React.Component {
render() {
return (
<React.Fragment>
{JSON.stringify(this.props.data)}
</React.Fragment>
);
}
}
您可以将data
数组作为data
prop传递给子组件。确保您还将组件名称中的第一个字符设置为大写,否则它将无法正常工作。
组件需要呈现单个顶级元素,因此您可以例如在子组件中使用JSON字符串化的div
prop渲染data
。
class App extends React.Component {
// ...
render() {
const { data } = this.state;
return (
<div>
<ChildComponent data={data} />
</div>
);
}
}
class ChildComponent extends React.Component {
render() {
return <div>{JSON.stringify(this.props.data)}</div>;
}
}