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>
      )
  }
}
相关推荐
神奇的代码在哪里2 分钟前
AI编程时代,PPT已成为过去,单个HTML文件创造无限可能
javascript·html·powerpoint·ai编程·ppt
huakoh24 分钟前
MCP 到底解决了什么问题:从协议设计到官方 Python SDK 最小实现
前端
用户0595401744626 分钟前
用了半年 LangChain Memory,才发现记忆总“串台”——3 个自动化测试避坑指南
前端·css
大爱编程♡28 分钟前
Vue3基础
前端·javascript·vue.js
weedsfly31 分钟前
防抖与节流:从原理到 React Hook 封装
前端·javascript·面试
甜味弥漫31 分钟前
React 从类组件到 Hooks:为什么 Hooks 改变了 React?
前端·javascript·react.js
天蓝色的鱼鱼37 分钟前
让 AI 写代码半年后,我发现了几个藏在项目里的安全隐患
前端·javascript·ai编程
随风一样自由1 小时前
【前端+跨端技术新格局】Tauri vs Electron 完整性能对比(2026实测数据+底层原理)
前端·javascript·electron
L-影1 小时前
Pydantic 模型:为你的 Web 数据装上“安检系统”
前端
Reload.1 小时前
GJ航司,验证码网易易盾 JS逆向 纯算轨迹
开发语言·前端·javascript