React 详解，组件，条件渲染

安装使用React，（npm，webpack）

命令：

npx create-react-app my-app
cd my-app
npm start

安装教程，可以参考 菜鸟教程 React安装 还有介绍目录

jsx，动态设置，react的className

一方法（拼接）


该方法报的警告
./src/Components/head.js
Line 21:  Unexpected string concatenation of literals  no-useless-concat

字符传拼接，会有警告

二方法.
{listItems}

 三目运算符 没有报错

.组件封装，引入

组件更加详细用法说明请看：https://blog.csdn.net/weixin_41487694/article/details/103125518

1.定义组件（两种方法：函数定义，es6的class定义）

创建组件，新建一个js文件 header.js

  使用函数定义

function Header（）{
    return 
我是页面头部
;
}

  使用es6的class定义

class Header extends React.Component {
  render() {
    return 
我是头部
;
  }
}

2.使用组件

在index.js这个页面使用

3.引入组件

import Head form ‘../header.js’

4.组件之间的传参（props）

父组件传子组件

需要在index.js页面中 

 上加入 （name这个时可以自定义的）

还可以这样写 

需要在header.js的文件中进行接参

function Header（props）{
    return 
{props.name}
;
}

子组件传父组件

在父组件中添加监测事件Getprops，

子组件中可以绑定事件，触发后进行传入父组件中

    navmobileclick =()=>{
        this.props.Getprops('参数')
    }

更简单的写法 

 
that.props.Getprops('参数')}>点我向父组件传参

 

条件渲染 React

&&符号（如果this.props.topinfo.subhead 为真，渲染div。其中his.props.topinfo.subhead 为引入组件时传入的参数）

{ this.props.topinfo.subhead &&
     

}

三目运算符（同理this.props.bgcolor 为引入组件时传入的参数）

{this.props.bgcolor === 'grey' ? (
     

) : (
     

)}