组件创建方式一:在main.js里面定义
1、在React中,构造函数就是一个最基本的组件。
2、如果想要把组件放到页面中,可以把构造函数的名称当做组件的名称,以HTML标签形式引入
到页面中即可。
3、React在解析所有的标签的时候,是以标签的首字母来区分的,如果标签的首字母是小写,就
按照普通的HTML标签解析;如果首字母是大写,则按照组件的形式去解析渲染。
4、在组件中,如果想要使用外部传递过来的数据,必须显示在构造函数参数列表中,需要定义
props属性来接收;props是一个形参,只读特性,不可修改
注意:...Obj 这种语法是ES6中的属性扩散,表示把这个对象上的所有属性展开放到这个位置
var name = "wangyf";
var age = 20;
var person = {
name: "wyf",
age: 18,
gender: "男",
adr: "ss",
};
function Rello(props) {
console.log(name);
var res = (
<h1>
hello world,{name}--
{age}--{person.gender}--{props.name}
</h1>
);
return res;
}
ReactDOM.render(
<div>
{/* <Rello name={name} age={age} gender={person.gender}></Rello> */}
<Rello {...person}></Rello>
</div>,
document.getElementById("app")
);
运行结果:
组件创建方式二:将组件抽离成单独的文件
1、新建一个Hello.jsx的文件
2、定义组件
2.1、新建的.jsx组件,依赖react,所以先导入React
2.2、定义一个Hello的function组件,注意必须要return
2.3、需要export default Hello。(需要将组建向外暴露出去)
3、在main.js中导入Hello组件
4、在main.js中渲染组件
语法:ReactDOM.render(myDiv2, document.getElementById("app"))
5、运行结果