React$Data-Props

1. What is Props

Props：传给组件的参数。

就像 HTML 通过 attributes 和 content 表达对应的内容。

就像 function 通过 parameters 来获取数据。

React Component 也通过 props 来获取数据。

2. How to Use

1. 定义props

function Basic(props) {
    return (
        <>
            <div>name: { props.name }, age: { props.age }</div>
            { props.children }
        </>
    )
}

function Destructuring({ name, age=8, children }) {
    return (
        <>
            <div> name: { name }, age: { age }</div>
            { children }
        </>
    )
}

2. 使用props

const person = { name: 'Tom', age: 18}
function AppBsic(){
    return(
        <Basic name={ person.name } age={ person.age }>
            <div>A good cat</div>
        </Basic>
    )
}

const person = { name: 'Tom', age: 18}
function AppSpread(){
    return(
        <Basic {...person}>
            <div>A good cat</div>
        </Basic>
    )
}

3. Caveat 注意事项

Props 是只读的 immutable。

为什么呢？就像我借你作业抄，你不能把我的答案改了。

如果你发现我的答案错了怎么办？告诉我，我来改。

---

这里的情况是：父组件定义了数据和操作数据的方法（data & functions），子组件接受它们。

就像是一个对象（设计者）里定义了数据和方法，使用者只需要使用它们。

Links

ReactProps