安装脚手架 npm install -g create-react-app
搭建项目 create-react-app my-app (my-app是项目名字)
cd my-app切换到根路径 或者手动选择文件夹切换 npm start启动项目
下面我们新建一些页面作为小组件
看一下目录
hello 和 list 是我新建的组件
vue中引用组件的步骤是:
import hello from './hello' (引入)
components:{
hello (注册组件 后才可以使用 )
}
<hello></hello> (使用组件)
而react中省去了注册组件的一步
import Hello from './hello' (引入)
<Hello /> (使用组件)
可以观察到现在组件名称的Hello的首字母是大写 如果写小写会出现以下报错
Warning: The tag <hello> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
大概意思就是说:浏览器无法识别标记。如果要呈现react组件,请以大写字母开头。这是和vue不一样的地方
相同之处是组件都只能有一个根结构
就是说
<div> <span>...</span><span>...</span> </div> 行 <span>...</span><span>...</span> 不行
上面是使用组件的方法 现在开始写我的第一个组件
分三个部分 第一个 导入react 第二个 写主体内容 第三导出
// 1. 导入 react import React from 'react'
//主体 const Welcome = function () { return ( <div className="shopping-list"> <ul> <li>Instagram</li> </ul> </div> ) } //导出 export default Welcome;
导出以后再app.js中引用 因为我是把app.js作为hello的父组件 所以我在里面导入使用
import React from 'react'; import './App.css'; import Hello from './hello.jsx' //这里导入 function App() { return ( <div className="App"> <header className="App-header"> <p>react</p> <Hello/> //这里使用 </header> </div> ); } export default App;
以上就完成了组件的简单应用 下面是父组件向子组件的传值
现在我赏给hello一个子组件 让它做一次爸爸
list组件:
// 1. 导入 react import React from 'react' const listt = function (props) { //注意 props参数要写 return ( // 此处注释的写法 <div className="shopping-list"> 我是hello的子组件----------- {props.user.name} </div> ) } export default listt;
hello组件做一些添加
// 1. 导入 react import React from 'react' import Listt from './list.jsx' //引入子组件 list const comment = { //声明一个对象 'msg':"hello react ", "cy":{ name:"陈怡", age:22 } } const Welcome = function () { return ( <div className="shopping-list"> <Listt user={comment.cy}/> //向子组件传输 comment的对象 <ul> <li>Instagram</li> <li>{comment.msg}</li> </ul> </div> ) } export default Welcome;
props vue中和react中的不同
react中
//父组件中
<Listt user={comment.cy}/> //向子组件传输 comment的对象 在react是这种写法 把comment.cy 复制给user 然后在子组件中通过props.user 使用传过去的值 (注意子组件的函数中需要写props参数)
//子组件中 直接使用 也省去了接收的那步或者是说接收方式变成了参数形式
const listt = function (props) { //注意 props参数要写
return (
// 此处注释的写法
<div className="shopping-list">
我是hello的子组件-----------
{props.user.name}
</div>
)
}
注意看这里 输出是props.user.name而不是props.user 可以看下面vue中的例子 直接输出{this.user}
这也算是我遇的坑 因为我是用vue开发对于{props.user}的输出我觉得是正常的按照我的想法输出的是
{ name:"陈怡", age:22 }
这样的对象 但是页面给出报错如下
Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead.
简单点说是人家不输出json的子对象 但是找到子对象的key值name和age 想输出需要明确key值 也就是{props.user.name} 或者{props.user.age} 这也是和vue不一样的地方 (当然上面提示了如果想呈现子集合可以改用array数组)
还记得在vue中怎么写的吗~ 回忆一下
//相同的情景
//父组件中 <Listt :user="comment.cy"/> 用属性名前面加: 也就是v-bind: 的方式告知vue接受的是一个变量 //子组件中接收 props: ["user"]
//使用 页面输出
{this.user}
刚入门 好像走的走的歪 循环渲染 样式 指令 事件 生命周期好像还没开始 就props了 。。。。。。。额 子组件向父组件就先放着了下次再看 拐回去先学基础 。。。。。。。。