网站建设与管理清考作业,无锡网络营销推广,江西建设部网站,三秦seo函数式组件和类组件 React组件的规范函数式组件类组件 React组件的规范
1、命名遵循PascalCase原则#xff0c;即所有单词首字母大写#xff0c;然后拼接在一起 如#xff1a;Age 、FirstName
函数式组件
代码#xff1a;
import ReactDOM from react-dom/client;const… 函数式组件和类组件 React组件的规范函数式组件类组件 React组件的规范
1、命名遵循PascalCase原则即所有单词首字母大写然后拼接在一起 如Age 、FirstName
函数式组件
代码
import ReactDOM from react-dom/client;const Hero (props) {return div 我是{props.name}/div
}
const root ReactDOM.createRoot(document.getElementById(root));
root.render(Hero name蜘蛛侠/Hero
);说明 1、包的引入以前有 import ReactDOM from react-dom;的写法现在不再支持了控制台会报出警告让你替换成import ReactDOM from react-dom/client; 2、参数props是这个Hero对象的属性集合name是这个对象中的属性 代码
import ReactDOM from react-dom/client;const Hero (props) {let {name} props;//也可以先将name解构出再输出return div 我是{name}/div
}
const root ReactDOM.createRoot(document.getElementById(root));
root.render(Hero name蜘蛛侠/Hero
);说明 1、let {name} props; 也可以先将name解构出再输出 类组件
代码
import React from react;
import ReactDOM from react-dom/client;class Hero extends React.Component{render(){return div 我是{this.props.name}/div}
}const root ReactDOM.createRoot(document.getElementById(root));
root.render(Hero name蜘蛛侠/Hero
);说明 1、类函数需要继承 React.Component 2、类函数中使用 this.props 获取属性对象
