react组件
React组件都是 函数
组件名首字母必须大写
细分 就是function(函数式组件) 和 class(类组件)
function(函数式组件)
import React from "react"
import ReactDOM from "react-dom"
function Com(props) {
console.log(props);
// 解构赋值
let { className, til } = props
let str = "清欢"
return <><div className={className} til={til}>
<h1>{str}</h1>
</div></>
}
// react 和 vue 组件都是只能有一个根元素(标签) 不过 react 可以使用 <></> 来做一个空标签 减少无用的标签造用
// 把组件行内属性打包成对象传给组件函数
ReactDOM.render(<Com className="qqq" til="qq" />, document.querySelector("#root"))
class(类组件)
注意事项
写class组件必须要写render(){}
render函数名是规定的
render函数的返回结果 就是 组件显示的内容
this.props中存储的都是传递进来的数据 父传子 传进来的数据
import React from "react"
import ReactDOM from "react-dom"
class MyApp extends React.Component {
// constructor(props) {
// super(props) // 写class继承的时候 若写了 constructor 则必写 super()
// // super 对应的就是 React.Component 这个函数体
// console.log(props);
// console.log(React.Component);
// //console.log(this.props); // super() 若是 super 不传参数 输出 undefined 找不到 this 的指向
// console.log(this.props); // super(props) 若是 super 传参数 输出 传递进来的数据 this 指向当前实例
// }
render() {
// render函数名是规定的
// render函数的返回结果 就是 组件显示的内容
// this.props中存储的都是传递进来的数据 父传子 传进来的数据
console.log(this.props);
// 解构赋值
let { className, til } = this.props
return <div className={"qqq " + className}>
<h1>长安</h1>
</div>
}
}
ReactDOM.render(<MyApp className="aaa" til="bbb"></MyApp>, document.querySelector("#root"))