跳到主要内容

React之props

props​

React组件使用props来相互通信，每个父组件都可以通关 props 来传递信息给他的子组件，props是只读的，子组件不能修改父组件传递过来的props。

传递 props​

function Parent() {
    return <Child name="fanceir" />;
}

这就是一个经典的父组件传递给子组件props的例子，Child组件可以通过props来获取name的值。

function Parent() {
    return <Child person={{ name: "fanceir", age: 18 }} />;
}

这同样也是一种父组件传递给子组件的方式，这里我使用了{{}}来传递一个对象，在Child组件中我可以通过 props.person 来访问person对象。

//Parent.jsx
import React from "react";
import Child from "./Child";
function Parent() {
    return <Child person={{ name: "fanceir", age: 18 }} />;
}

//Child.jsx
import React from "react";
function Child(props) {
    return <div>{props.person.name}</div>;
}
//或者使用解构
function Child({ person }) {
    return <div>{person.name}</div>;
}
//以上这两种方法都可以获取到`person`对象中的`name`属性

默认 props​

function Child(props) {
    return <div>{props.name}</div>;
}
Child.defaultProps = {
    name: "fanceir",
};

给 Props 一个默认值​

function Child({ name = "fanceir" }) {
    return <div>{name}</div>;
}

简化书写 props​

function Parent(props) {
    return <Child {...props} />;
}

function Child({ name }) {
    return <div>{name}</div>;
}

将 jsx 最为一个子组件传递​

function Parent() {
    return <Child>{<div>hello</div>}</Child>;
}
// utils.jsx
export function getChildNumber(person, number) {
    return person.name + number;
}
//Parent.jsx
import React from "react";
import Child from "./Child";
import { getChildNumber } from "./utils";
function Parent() {
    return <Child>{getChildNumber({ name: "fanceir" }, 18)}</Child>;
}
//Child.jsx
import React from "react";
function Child(props) {
    return <div>{props.children}</div>;
}
0%