时间戳

首页 > 解决方案 > Antd 如何使用一种 onLoad 或 componentDidMount 函数？

javascript - Antd 如何使用一种 onLoad 或 componentDidMount 函数？

问题描述

我正在使用 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>
    )
}

标签： javascriptreactjsantd

解决方案

React 组件不使用window.onload并且componentDidMount仅在基于类的组件中保留且有效。功能组件可以使用useEffect带有空依赖数组的 React 钩子来等效于componentDidMount生命周期方法。

let product = {};

useEffect(() => {
  product = grassKinds.find(x => x.id);
  console.log('Toeter!');
}, []);

推荐阅读