React:props说明

  1. props是只读对象(readonly)
    根据单项数据流的要求,子组件只能读取props中的数据,不能进行修改
  2. props可以传递任意数据
    数字、字符串、布尔值、数组、对象、函数、JSX
html 复制代码
import FileUpdate from './FileUpdate';
export default class App extends React.Component{
  constructor(props) {
	  this.state = {
	    message: 'this is message'
	  }
  }
  const FileUpdateProps = {
  	...this.props,
  	message: this.state.message
  }
  render() {
    return (
      	<FileUpdate {...FileUpdateProps} />
      )
  }
}

FileUpdate 画面接收props

html 复制代码
export default class FileUpdate extends React.Component{
	constructor(props) {
	    super(props);
	    props?.onRef(this);
	  }
  const { message } = this.props;
  render() {
    return (
      	<div>{ message }</div>
      )
  }
}
相关推荐
酉鬼女又兒8 分钟前
HTML基础实例样式详解零基础快速入门Web开发(可备赛蓝桥杯Web应用开发赛道) 助力快速拿奖
前端·javascript·职场和发展·蓝桥杯·html·html5·web
Watermelo61711 分钟前
【前端实战】构建 Vue 全局错误处理体系,实现业务与错误的清晰解耦
前端·javascript·vue.js·信息可视化·性能优化·前端框架·设计规范
A923A13 分钟前
【Vue3大事件 | 项目笔记】第二天
前端·vue.js·笔记·前端框架·前端项目
万码社27 分钟前
小程序开发实战:我手写日历组件踩过的那些坑
前端
工藤新一¹39 分钟前
《操作系统》第一章(1)
java·服务器·前端
进击的尘埃39 分钟前
Vue 3 编译器宏的编译时魔法:defineModel、defineSlots 与 AST 转换的真相
javascript
用户97141718142739 分钟前
Flex 和 Grid 详细使用指南:从入门到实战避坑
前端·css
不会敲代码141 分钟前
使用 Mock.js 模拟 API 数据,实现前后端并行开发
前端·javascript
琛説42 分钟前
Web-Rooter:一种 IR + Lint 模式的 AI Agent 创新尝试【或许是下一个 AI 爆火方向】
前端·人工智能
向上的车轮1 小时前
TypeScript 一日速通指南:数据类型全解析与转换指南
javascript·typescript