React 脚手架、组件传参
nodejs 环境开发
ES7 React/Redux/GraphQL/React-Native snippets
创建 react 应用
方法①
npx create-react-app appdome
方法②
npm i create-react-app -g
create-react-app appdome
降版本
npm i react@17.0.0 react-dom@17.0.0
清理目录结构
appdome
– public
index.html
– src
index.js 入口文件
app.js 根组件
运行
npm start
组件传参
父传子
在父组件使用子组件的地方,定义属性传参
– 子组件中通过 props 接收参数,类组件需要 this.props.属性名,函数组件 props.属性名
– 传参类型:字符串… 基本数据类型、对象{}、函数 ()=>{}、jsx
App.js
import React, {
Component } from 'react'
import Parent from './dome/Parent'
export default class App extends Component {
render() {
return (
<div>
<Parent/>
</div>
)
}
}
Parent.js
import React,{
Component} from 'react'
import Son from './Son'
export default class Parent extends Component {
state = {
msg:'The sound of a spring swallows dangerous stones',
author:{
name:'王维',
identity:'poet'
}
}
render(){
return(
<div>
<h2>父传子</h2>
<Son
msgs = {
this.state.msg}
callback = {
this.getMsg}
/>
</div>
)
}
getMsg = ()=> {
console.log('>>The sound of the spring swallows dangerous stones, and the sun is cold and green.');
}
}
Son.js
import React, {
Component } from 'react'
export default class Son extends Component {
render() {
return (
<div>
<h2>Son组件</h2>
<p>{
this.props.msgs}</p>
<button onClick =