[英]React function for making multiple class components
So, I have a class component that loads some data from API: 所以,我有一个类组件从API加载一些数据:
class Item extends Component {
constructor(props) {
super(props);
this.state = {
output: {}
}
}
componentDidMount() {
fetch(item_url[0])
.then(response => response.json())
.then(data => this.setState({ output: data }));
}
render() {
console.log(this.state.output);
const { general = {name:"", description:""} } = this.state.output;
const { brand = {name : ""} } = this.state.output;
const { id } = this.state.output;
const {images = {primary:{large:""}}} = this.state.output;
return (
<ItemPanel>
<ItemBox>
<BoxTitle>{general.name}</BoxTitle>
<BoxId>Item ID: {id}</BoxId>
<Details onClick={show_details}>Show more...</Details>
<Inline>
<Quantity type="number" defaultValue="1"></Quantity>
<Icon>add_shopping_cart</Icon>
</Inline>
<AddItem>
<Sfont>Add to cart</Sfont>
</AddItem>
</ItemBox>
<BoxImg src={images.primary.large} alt='img error'></BoxImg>
</ItemPanel>
);
}
}
export default Item;
It works correctly with the API, address (URL) is inserted from this array: 它可以正常使用API,从这个数组插入地址(URL):
let item_url = [
'http://localhost:3005/products/774944',
'http://localhost:3005/products/774945',
'http://localhost:3005/products/774946',
'http://localhost:3005/products/123581',
'http://localhost:3005/products/782691',
'http://localhost:3005/products/782485',
'http://localhost:3005/products/782486',
'http://localhost:3005/products/782487',
'http://localhost:3005/products/782488',
'http://localhost:3005/products/738471'];
What I want to achieve here is a function that renders this component multiple times (every time with another API data). 我想在这里实现的是一个多次渲染此组件的函数(每次都使用另一个API数据)。 I guess some kind of loop function is needed here, but can't figure it out.
我想这里需要某种循环功能,但无法弄明白。 It is now rendered from my index.js like this:
它现在从我的index.js渲染,如下所示:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Item from './DataHarvester'
ReactDOM.render([<Item />, <App />], document.getElementById('root'));
But obviously, it creates only one component while I need to have 10. 但显然,它只创建了一个组件,而我需要有10个组件。
You can use map
to do this; 你可以使用
map
来做到这一点; typically the pattern is as follows: 通常模式如下:
map
over that state to produce child components map
该状态以生成子组件 const Section = (props) => ( <p>{props.url}</p> ); const App = () => { const urls = [ 'http://localhost:3005/products/774944', 'http://localhost:3005/products/774945', 'http://localhost:3005/products/774946', 'http://localhost:3005/products/123581', 'http://localhost:3005/products/782691', 'http://localhost:3005/products/782485', 'http://localhost:3005/products/782486', 'http://localhost:3005/products/782487', 'http://localhost:3005/products/782488', 'http://localhost:3005/products/738471' ]; return ( <div> {urls.map(x => <Section url={x}/>)} </div> ); }; ReactDOM.render(<App />, document.getElementById('r'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="r"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.