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 的代码中使用它们，就像使用变量一样。

页面渲染如下：

当然我们也可以其他页面使用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官方文档教程，不同的是我这里使用TS来写