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 =