第六章 react前端开发-Props

愿乘长风、破万里浪

已于 2022-11-13 20:59:39 修改

阅读量268

点赞数

分类专栏： react前端文章标签： react.js javascript 前端

于 2022-11-13 20:14:06 首次发布

本文链接：https://blog.csdn.net/qq_24430629/article/details/127835393

版权

react前端专栏收录该内容

8 篇文章 5 订阅

订阅专栏

本文深入介绍了React中的props和state的基本用法。props用于从父组件向子组件传递数据，是只读的，而state则允许组件内部状态的改变。示例展示了如何设置props的默认值以及props和state的组合使用，强调了state在容器组件中更新数据的重要性。

摘要由CSDN通过智能技术生成

上一章刚刚学了state，state 和 props 主要的区别是props是不可变的，而state可以根据与用户交互来改变。因此有些容器组件需要用state来更新和修改数据。而子组件只能通过 props 来传递数据

前面的内容已经使用过props了，本章再加深一下印象

6.1 props基本使用

import React from "react"
import ReactDOM from "react-dom"

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}

const element = <HelloMessage name="zhangsan"/>;

ReactDOM.render(
    element,
    document.getElementById('root')
);

结果：

6.2 props默认值

在组件中可以为props设置默认值，如下例所示，为props中的name设置默认值，使用defaultProps

import React from "react"
import ReactDOM from "react-dom"

class HelloMessage extends React.Component {
    render() {
        return (
            <h1>Hello, {this.props.name}</h1>
        );
    }
}

HelloMessage.defaultProps = {
    name: 'wangwu'
};

const element = <HelloMessage/>;

ReactDOM.render(
    element,
    document.getElementById('root')
);

结果：

6.3 state与props组合使用

下面的是一个state与props组合使用的例子，在上一章中也有类似的例子

import React from "react"
import ReactDOM from "react-dom"

class People extends React.Component {
    constructor() {
        super();

        this.state = {
            name: "zhangsan",
            age: 20
        }
    }
    render() {
        return (
            <div>
                <Name name={this.state.name} />
                <Age age={this.state.age} />
            </div>
        );
    }
}



class Name extends React.Component {
    render() {
        return (
            <h1>{this.props.name}</h1>
        );
    }
}

class Age extends React.Component {
    render() {
        return (
            <h1>{this.props.age}</h1>
        );
    }
}

ReactDOM.render(
    <People />,
    document.getElementById('root')
);

结果：