React 组件prop传值

将 props 传递给子组件

开发环境:React+ts+ant
将一些 props 传递给 Avatar。例如,让我们传递两个 props:person(一个对象)和 size(一个数字)

定义类组件Avatar(子组件)和函数Profile(父组件),代码如下:

import {Component} from "react";

const getImageUrl = (person: { imageId: string; }, size = 's') => {
    return (
        'https://i.imgur.com/' + person.imageId + size + '.jpg'
    );
}

class Avatar extends Component<{ person: any, size: any }> {
    render() {
        let {person, size} = this.props;
        return (
            <img
                className="avatar"
                src={getImageUrl(person)}
                alt={person.name}
                width={size}
                height={size}
            />
        );
    }
}


export default function Profile() {
    return (
        <>
            <Avatar
                size={100}
                person={{
                    name: 'Katsuko Saruhashi',
                    imageId: 'YfeOqp2'
            }}/>
            <Avatar
                size={80}
                person={{
                    name: 'Aklilu Lemma',
                    imageId: 'OKS67lh'
            }}/>
        </>
    );
}

我们可以通过在 Avatar 之后直接列出它们的名字 person, size 来读取这些 props。这些 props 在 ({ 和 }) 之间,并由逗号分隔。这样,我们可以在 Avatar 的代码中使用它们,就像使用变量一样。

页面渲染如下:
React 组件prop传值_第1张图片

当然我们也可以其他页面使用product页面里面的子组件Avatar。
在需要使用的组件页面具名导入Avatar,让后传入对应的值即可

import React from 'react';
import {Avatar} from "./product";

const App: React.FC = () => (
    <div>
        <p>Bom 页面</p>
        <Avatar person={{
            name: 'Lin Lanying',
            imageId: '1bX5QH6'
        }} size={50}/>
    </div>
);

export default App;

页面渲染:
在这里插入图片描述

有时候props可能很多更复杂,下面贴一个复杂点的props,代码:

import {Component} from "react";
export function getImageUrl(person: { imageId: string; }, size = 's') {
    return (
        'https://i.imgur.com/' + person.imageId + size + '.jpg'
    );
}
class Profile extends Component<{ person: any, size: number }> {
    render() {
        let {person, size} = this.props;
        const imageSrc = getImageUrl(person)
        return (
            <section className="profile">
                <h2>{person.name}</h2>
                <img
                    className="avatar"
                    src={imageSrc}
                    alt={person.name}
                    width={size}
                    height={size}
                />
                <ul>
                    <li>
                        <b>Profession:</b> {person.profession}
                    </li>
                    <li>
                        <b>Awards: {person.awards.length} </b>
                        ({person.awards.join(', ')})
                    </li>
                    <li>
                        <b>Discovered: </b>
                        {person.discovery}
                    </li>
                </ul>
            </section>
        );
    }
}

export default function Gallery() {
    return (
        <div>
            <h1>Notable Scientists</h1>
            <Profile person={{
                imageId: 'szV5sdG',
                name: 'Maria Skłodowska-Curie',
                profession: 'physicist and chemist',
                discovery: 'polonium (chemical element)',
                awards: [
                    'Nobel Prize in Physics',
                    'Nobel Prize in Chemistry',
                    'Davy Medal',
                    'Matteucci Medal'
                ],
            }}  size={100}/>
            <Profile person={{
                imageId: 'YfeOqp2',
                name: 'Katsuko Saruhashi',
                profession: 'geochemist',
                discovery: 'a method for measuring carbon dioxide in seawater',
                awards: [
                    'Miyake Prize for geochemistry',
                    'Tanaka Prize'
                ],
            }}  size={70}/>
        </div>
    );
}

页面渲染
React 组件prop传值_第2张图片

例子是参考React官方文档教程,不同的是我这里使用TS来写

你可能感兴趣的:(React,react.js,前端)