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>
      )
  }
}
相关推荐
颜酱41 分钟前
前缀和技巧全解析:从基础到进阶
javascript·后端·算法
CappuccinoRose1 小时前
HTML语法学习文档(九)
前端·学习·架构·html5
NEXT061 小时前
BFC布局
前端·css·面试
菜鸟小芯1 小时前
【GLM-5 陪练式前端新手入门】第四篇:卡片布局 —— 让个人主页内容更有层次
前端·人工智能
Hello.Reader1 小时前
Leptos + Tauri 2 前端配置Trunk + SSG + 移动端热重载一次打通(Leptos 0.6 口径)
前端
岱宗夫up1 小时前
【前端基础】HTML + CSS + JavaScript 进阶(一)
开发语言·前端·javascript·css·html
qq_24218863321 小时前
【零基础使用Trae CN编写第一个AI游戏教程】
开发语言·前端·人工智能·python·游戏·html
a1117761 小时前
3D赛车躲避游戏(html threeJS开源)
前端·游戏·3d·开源·html·threejs
PD我是你的真爱粉1 小时前
Vue Router 4 路由进阶
前端·javascript·vue.js
木子欢儿1 小时前
在 Debian 13(以及 12)上安装和配置 tightvncserver 并让普通用户使
运维·前端·debian