我正在使用AntDesign,并且想要使用onLoad或componentDidMount函数。两者都不起作用。
如何实现具有相同目的的功能?
//我尝试过的东西对我没有用。(我可能做错了。)
return (
<div onLoad={() => {console.log('Toeter!')}}>
//Blah blah
</div>
)
window.onload = () => {
//Blah blah
}
componentDidMount = () => {
//Blah blah
}
我要做的是在组件出现在屏幕上时触发一个功能。该功能应该在一系列对象中找到产品。
编辑:评论中要求的完整组件
import * as React from "react";
import {Row, Col, Image, Card, Space, Breadcrumb, Descriptions, InputNumber, Button} from 'antd';
import * as FreddieGras from "../images/freddieGras.jpg";
import "react-multi-carousel/lib/styles.css";
import {RouterProps} from "./router.props";
import {Link} from "@reach/router"
interface ProductDetailProps extends RouterProps {
id?: string;
}
export default function ProductDetail(props: ProductDetailProps) {
// Different kinds of grass
let grassKinds = [
{
name: 'Kate',
id: 1,
imageName: FreddieGras,
desc: "Lorem Ipsum dolor sit amet.",
available: true,
softness: 7,
realness: 6,
price: 17.95
},
{
name: 'Fred',
id: 2,
imageName: FreddieGras,
desc: "Lorem Ipsum dolor sit amet.",
available: false,
softness: 7,
realness: 6,
price: 17.95
},
{
name: 'Gideon',
id: 3,
imageName: FreddieGras,
desc: "Lorem Ipsum dolor sit amet.",
available: true,
softness: 7,
realness: 6,
price: 17.95
},
{
name: 'Isa',
id: 4,
imageName: FreddieGras,
desc: "Lorem Ipsum dolor sit amet.",
available: true,
softness: 7,
realness: 6,
price: 17.95
},
];
let product = {};
window.onload = () => {
product = grassKinds.find(x => x.id);
console.log('Toeter!');
}
return (
<div onLoad={() => {
console.log('Toeter!')
}}>
<Breadcrumb>
<Breadcrumb.Item>
<Link to="/">Home</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>
</Breadcrumb.Item>
</Breadcrumb>
<Row>
<Col span={10} justify={'space-around'} align={'center'}>
<Image
src={FreddieGras}
/>
</Col>
<Col span={14}>
<Descriptions title="User Info" style={{width: '50%'}}>
<Descriptions.Item label="Naam">Kate</Descriptions.Item>
<Descriptions.Item label="Zachtheid">7/10</Descriptions.Item>
<Descriptions.Item label="Echtheid">6/10</Descriptions.Item>
<Descriptions.Item label="Prijs /m2">€17,95</Descriptions.Item>
</Descriptions>
<Card title="Bereken oppervlakte" style={{margin: '5px'}}>
<label>Lengte (m)</label>
<InputNumber
defaultValue={1000}
formatter={value => `€ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
onChange={() => {
console.log('Number')
}}
/>
<div>
<p><b>Omtrek </b> 10 M</p>
<p><b>Oppervlakte </b> 2,5 M2</p>
</div>
</Card>
<Card title="Totaalprijs" style={{margin: '5px'}}>
<b>€ 17,95</b>
<Button onClick={() => {
console.log('In winkelwagen')
}}>In winkelwagen</Button>
</Card>
</Col>
</Row>
</div>
)
}
React组件不使用window.onload
,componentDidMount
仅在基于类的组件中保留并有效。功能组件可以使用useEffect
带有空依赖项数组的React钩子来等效于componentDidMount
生命周期方法。
let product = {};
useEffect(() => {
product = grassKinds.find(x => x.id);
console.log('Toeter!');
}, []);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句