map react 多个组件_react map生成组件 - CSDN
  • react返回多个标签的正确做法是用高阶组件;或者用数组将其包裹起来;但是推荐使用高阶组件

    react返回多个标签的正确做法是用高阶组件;或者用数组将其包裹起来;但是推荐使用高阶组件

    展开全文
  • 1、新建文件夹 component文件夹=》navWrap文件夹=〉navWrap.js ...import React, {Component} from 'react'; import Pic from 'pic/pic'; let list = [ { img: require('images/1.jpg'), title: '易烊千玺',...

    1、新建文件夹
    component文件夹=》navWrap文件夹=〉navWrap.js

    2、父组件的js

    import React, {Component} from 'react';
    import Pic from 'pic/pic';
    let list = [
        {
            img: require('images/1.jpg'),
            title: '易烊千玺',
            cont: '大佬'
        },
        {
            img: require('images/1.jpg'),
            title: '易烊千玺',
            cont: '大佬'
        }
    ]
    export default class NavWrap extends Component {
        render () {
            let dataList = list.map((item, index) => {
                return (<Pic
                    key={index}
                    {...item}
                ></Pic>)
                // {...item}相当于下面的三句代码 es6的扩展运算符
                // img={item.img}
                // title={item.title}
                // cont={item.cont}
            })
            return (
                <div className="navWrap">
                    {dataList}
                </div>
            )
        }
    }
    

    3、子组件

    import React, {Component} from 'react';
    export default class Pic extends Component {
        render () {
            let {img, title, cont} = this.props;
            return (
                <div className="pic">
                    <img src={img} alt=""/>
                    <h3>姓名:{title}</h3>
                    <p>外号:{cont}</p>
                </div>
            )
        }
    }
    

    在这里插入图片描述

    展开全文
  • react组件-组件嵌套

    2019-06-11 15:38:33
    一、组件输出输出组件表达式{{}}不仅能输出数据,也能直接输出元素class App extends React.Component{ constructor(...args){ super(...args) } render(){ let span=<span>测试一下</span> ...

    一、组件输出

    输出组件

    表达式{{}}不仅能输出数据,也能直接输出元素

    class App extends React.Component{
        constructor(...args){
            super(...args)
        }
        render(){
            let span=<span>测试一下</span>
            return{
                <div>
                    {span}
                </div>
            };
        }
    }
    let root=document.getElementById('box');
    ReactDOM.render(<App/>,root)复制代码

    组件数组

    可以直接输出一组元素

    //...
    render(){
        let arr=[
            //key:用于绑定虚拟DOM和真实DOM
            <span key=[0]>aaa</span>
            <span key=[1]>bbb</span>
            <span key=[2]>ccc</spam>
        ];
        return {
            <div>
                {arr}
            </div>
        };
    }
    //...复制代码

    关于key

    key非常重要,他关联虚拟DOM和真实DOM,从而在虚拟DOM修改时对实际DOM元素做最小化的修改以此提高性能;普通元素其实也有key,由React生成,而数组元素则需要我们指定

          注意⚠️:尽量不要用index作为key,因为index是会改变的(比如删掉一个元素,后续元素的index都会-1)


    key的选择标准:

    • 唯一:否则ReactDOM无法工作
    • 不变:否则DOM元素混乱
    组件循环

    //...
    render(){
        let arr=[12,5,8];
        return(){
            <div>
                {arr.map((item,index)=>{
                    //错误
                    <span key="index">{item}</span>
                    //正确
                    <span key={index}>{item}</span>
                ))}
            </div>
        }
    }
    //...复制代码

    二、组件嵌套

    组件可以像html一样嵌套使用

    //子组件
    class Item extends React.Component{
        constructor(...args){
            super(...args)
        }
        render(){
            return{
                <li>
                    //this.props包含父级传递进来的属性
                    {this.props.data}
                    姓名:{this.props.name}<br/>
                    年龄:{this.props.age}
                </li>
            }
        }
    }
    //父组件
    class Parent extends React。Component{
        constructor(...ages){
            super(...ages)
        }
        render(){
            let user=[
                {ID:1,name:'blue',age:18},
                {ID:2,name:'张三',age:25},
                {ID:3,name:'李四',age:21}
            ];
            return {
                <ul>
                    {users.map(user=>(
                        <Item key={user.ID} name={user.name} age={user.age}/>
                    ))}
                </ul>
            }
        }
    }复制代码


    转载于:https://juejin.im/post/5cea9908f265da1b5e72cfeb

    展开全文
  • react开发需要引入多个依赖文件:react.js、react-dom.js,分别又有开发版本和生产版本,create-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空,然后在里面重新创建一个index...

    1.编写react应用程序

    react开发需要引入多个依赖文件:react.js、react-dom.js,分别又有开发版本和生产版本,create-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空,然后在里面重新创建一个index.js. 写入以下代码:

    // 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX,稍后会讲到JSX,要写JSX,就必须引入React
    import React from 'react'
    // ReactDOM 可以帮助我们把 React 组件渲染到页面上去,没有其它的作用了。它是从 react-dom 中引入的,而不是从 react 引入。
    import ReactDOM from 'react-dom'
    
    // ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上
    ReactDOM.render(
    // 这里就比较奇怪了,它并不是一个字符串,看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗?这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
      <h1>欢迎进入React的世界</h1>,
    // 渲染到哪里
      document.getElementById('root')
    )
    

    2.元素

    如果代码多了之后,不可能像上面一样,一直在render方法里写,所以就需要把里面的代码提出来,定义一个变量,像这样:

    import React from 'react'
    import ReactDOM from 'react-dom'
    // 这里感觉又不习惯了?这是在用JSX定义一下react元素
    const app = <h1>欢迎进入React的世界</h1>
    ReactDOM.render(
      app,
      document.getElementById('root')
    )
    

    3.组件

    (1)函数式组件( 无状态组件 PureComponent)
    由于元素没有办法传递参数,所以我们就需要把之前定义的变量改为一个方法,让这个方法去return一个元素:

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 特别注意这里的写法,如果要在JSX里写js表达式(只能是表达式,不能流程控制),就需要加 {},包括注释也是一样,并且可以多层嵌套
    const app = (props) => <h1>欢迎进入{props.name}的世界</h1>
    
    ReactDOM.render(
      app({
        name: 'react'
      }),
      document.getElementById('root')
    )
    

    这里我们定义的方法实际上也是react定义组件的第一种方式-定义函数式组件,这也是无状态组件。但是这种写法不符合react的jsx的风格,更好的方式是使用以下方式进行改造

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    const App = (props) => <h1>欢迎进入{props.name}的世界</h1>
    
    ReactDOM.render(
      // React组件的调用方式
      <App name="react" />,
      document.getElementById('root')
    )
    

    这样一个完整的函数式组件就定义好了。但要注意!注意!注意!组件名必须大写,否则报错。

    (2)class组件
    ES6的加入让JavaScript直接支持使用class来定义一个类,react的第二种创建组件的方式就是使用的类的继承,ES6 class是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码:
    写法一:

    import React from 'react'
    
    import ReactDOM from 'react-dom'
    
    class App extends React.Component{
        render(){
            return(
                console.log(this),//此处的this指的就是App组件,自定义在App上的属性就在this的props上
                <h1>Hello {this.props.name}React!</h1>
            )
        }
    }
    
    ReactDOM.render(
        <App name="1905"/>,//在App组件上自定义一个name的属性
        document.getElementById('root')
    )
    

    写法二:【推荐写法】

    import React,{Component} from 'react'//此处发生了改变
    
    import ReactDOM from 'react-dom'
    
    class App extends Component{//此处发生了改变
        render(){
            return(
                console.log(this),
                <h1>Hello {this.props.name}React!</h1>
            )
        }
    }
    
    ReactDOM.render(
        <App name="1905"/>,
        document.getElementById('root')
    )
    

    两种写法的运行结果和之前完全一样,因为JS里没有真正的class,这个class只是一个语法糖, 但二者的运行机制底层运行机制不一样。
    函数式组件是直接调用, 在前面的代码里已经有看到,es6的class组件其实就是一个构造器,每次使用组件都相当于在实例化组件,像这样:

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component {
      render () {
        return (
      		<h1>欢迎进入{this.props.name}的世界</h1>
      	)
      }
    }
    
    const app = new App({
      name: 'react'
    }).render()
    
    ReactDOM.render(
      app,
      document.getElementById('root')
    )
    

    写法三:
    将App组件作为单独的文件Hello.js(自己建立的文件)放在src的components(自己建立的文件)的文件夹下面,然后在需要的文件中引入:
    Hello.js文件:

    import React, { Component } from 'react';
    
    class App extends Component{
        render(){
            return(
                <h1>Hello World!</h1>
            )
        }
    }
    
    export default App
    

    在需要的文件引入:

    import React,{Component} from 'react'
    
    import ReactDOM from 'react-dom'
    
    import App from  './components/Hello'
    
    ReactDOM.render(
        <App/>,
        document.getElementById('root')
    )
    

    (3)组件的组合、嵌套
    将一个组件渲染到某一个节点里的时候,会将这个节点里原有内容覆盖
    组件嵌套的方式就是将子组件写入到父组件的模板中去,且React没有Vue中的内容分发机制(slot),所以我们在一个组件的模板中只能看到父子关系

    【组合】:示例代码如下,在src下的components文件夹建立Father.js和Son.js文件,
    Son.js代码如下:

    import React, { Component } from 'react';
    
    class Son extends Component{
       render(){
           return(
            <p>这里是子组件</p>
           )
       }
    }
    
    
    export default Son
    

    Father.js代码如下:

    import React, { Component } from 'react';
    
    class Father extends Component{
        render(){
            return(
                <div>
                     <h3>这里是父组件</h3>
                     {this.props.children}//特别注意此处必须要写,相当于给Son组件开辟空间显示,否则Son组件会被父组件的内容覆盖
                </div>
               
            )
        }
    }
    export default Father
    

    在App.js引入

    import React, { Component } from 'react';
    
    import Father from './components/Father'
    
    import Son from './components/Son'
    
    
    class App extends Component{
        render(){
            return(
                <Father>
                    <Son/>
                </Father>
            )  
        }
    }
    
    export default App
    

    最后在整个项目的入口文件index.js引入

    import React,{Component} from 'react'
    
    import ReactDOM from 'react-dom'
    
    import App from  './App'
    
    ReactDOM.render(
        <App/>,
        document.getElementById('root')
    )
    

    【嵌套】:示例代码如下,在src下的components文件夹建立Father.js和Son.js文件,
    Son.js代码如下:

    import React, { Component } from 'react';
    
    class Son extends Component{
        render(){
            return(
                <div>
                    <h3>这是子组件</h3>
                </div>
            )    
        }
    }
    
    
    export default Son
    

    Father.js代码如下:

    import React, { Component } from 'react';
    
    import Son from './Son'
    
    class Father extends Component{
        render(){
            return(
                <div>
                    <h3>这是父组件</h3>
                    <Son/>//将子组件嵌套在父组件中,这是与组件嵌套不同之处
                </div>
            )
        }
    }
    
    
    export default Father
    

    在App.js引入:

    import React, { Component } from 'react';
    
    import Father from './components/Father'
    
    class App extends Component{
        render(){
            return(
                <Father>
                </Father>//直接写入父组件
            )  
        }
    }
    
    export default App
    

    最后在整个项目的入口文件index.js引入:

    import React,{Component} from 'react'
    
    import ReactDOM from 'react-dom'
    
    import App from  './App'
    
    ReactDOM.render(
        <App/>,
        document.getElementById('root')
    )
    

    (4)组件中的样式
    一共有四种
    ● 行内样式

    import React, { Component } from 'react';
    
    class StyleSheetOne extends Component{
        render(){
            return(
                <div>
                    <h3>组件的样式--行内样式</h3>
                    <p style={{fontSize:'20px',color:'red',fontWeight:900}}>Hello React!</p>
                </div>
            )
        }
    }
    
    export default StyleSheetOne
    

    ● 使用class,通过添加类名实现
    单独定义一个css文件,

    .style{
        color:yellow;
        font-size:20px;
    }
    

    在在需要的组件文件中引入该css文件,并给需要添加样式的元素添加类名,注意此处添加类名为

    className=‘ 类名 ’
    
    import React, { Component } from 'react';
    
    import './StyleSheetTwo.css'
    class StyleSheetTwo extends Component{
        render(){
            return(
                <div>
                    <h3>组件的样式--class添加类名</h3>
                    <p className="style">Hello React!</p>
                </div>
            )
        }
    }
    export default StyleSheetTwo
    

    ● 不同的条件添加不同的样式
    有时候需要根据不同的条件添加不同的样式,比如:完成状态,完成是绿色,未完成是红色。那么这种情况下,我们推荐使用classname/classnames这个包
    先安装classname第三方包:

    cnpm i classname -S
    
    
    import React, { Component } from 'react'
    import classname from 'classname'
    
    class StyleCompThree extends Component{
    
      render () {
        return (
          <div>
            <h3> 组件的样式--classname第三方包</h3>
            <p
              className = {
                classname({
                  one: true,
                  two: false,
                  three: false
                })
              }
            >Hello React!</p>
          </div>
        )
      }
    
    }
    
    export default StyleCompThree
    

    ● css-in-js(在js中写css)
    styled-components是针对React写的一套css-in-js框架,简单来讲就是在js中写css。
    styled-components是一个第三方包,要安装,安装如下

    cnpm i styled-components -S
    

    React认为一切皆组件,那么样式也应该是一个组件

    import React, { Component } from 'react';
    
    import styled from 'styled-components'
    
    const Container =styled.div`
      width:300px;
      height:300px;
      background:pink;
    
    `
    const Wrapper =styled.section`
      width:300px;
      height:200px;
      background:yellow
      h4{
        color:red; 
      }
      ul{
        background:green;
        li{
          list-style:none;
          color:blue;
          font-weight:800
        }
      }
    `
    class StyleSheetFour extends Component{
      render(){
        return(
            <div>
              <h3>组件的样式--styled-components</h3>
            <Container>
              <Wrapper>
                  <h4>今日头条</h4>
                  <ul>
                    <li>Hello React!</li>
                    <li>你好 React!</li>
                  </ul>
              </Wrapper>
            </Container>
            </div>
        )  
      }
    }
    
    
    export  default StyleSheetFour
    

    (5)组件的数据挂载方式
    React中数据分为两个部分:属性和状态,这与Vue是不同的,Vue中数据只有状态这一种类型。
    【属性】(props):
    props是正常从外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改,但是你可以通过父组件主动重新渲染的方式来传入新的 props
    属性是描述性质、特点的,组件自己不能随意更改。
    属性可以定义在组件内部,也可从外界传入,如下代码所示,定义一个Hello.js组件

    import React, { Component } from 'react'
    
    class Hello extends Component{
    
        static defaultProps={//定义一个该组件内部的属性
            msg:'Hello World!'
        }
    
        render(){
            console.log(this)//msg为定义在组件内的属性,info为外部传来的属性,但是在this的props属性中都可以找到
            return(
                <div>
                    <p>内部设置的属性:{this.props.msg}</p>
                    <p>外部设置的属性:{this.props.info}</p>
                </div>
            )    
        }
    }
    
    export default Hello
    

    在App.js中引入Hello.js组件,并给Hello.js传递一个名为info的属性

    import React, { Component } from 'react';
    
    import Hello from './components/Hello'
    class App extends Component{
        render(){
            return(
                <div>
                    <Hello info='你好 世界!'/>   
                </div>
              
            )  
        }
    }
    
    export default App
    

    props.children
    我们知道使用组件的时候,可以嵌套。要在自定义组件的使用嵌套结构,就需要使用 props.children 。在实际的工作当中,我们几乎每天都需要用这种方式来编写组件。具体用法见上面的组件嵌套中的使用方法。

    prop-types
    使用prop-types检查props[ 属性验证 ]
    React其实是为了构建大型应用程序而生, 在一个大型应用中,根本不知道别人使用你写的组件的时候会传入什么样的参数,有可能会造成应用程序运行不了,但是不报错。为了解决这个问题,React提供了一种机制,让写组件的人可以给组件的props设定参数检查,需要安装和使用prop-types:

       $ npm i prop-types -S
    
        import React, { Component } from 'react'
        
        import PropTypes from 'prop-types';//引入
        class Hello extends Component{
        
            static defaultProps={//定义一个该组件内部的属性
                msg:'Hello World!'
            }
        
            render(){
                console.log(this)//msg在this的props属性中可以找到
                return(
                    <div>
                        <p>内部设置的属性:{this.props.msg}</p>
                        <p>外部设置的属性:{this.props.info}</p>
        
                    </div>
                )    
            }
        }
        
        Hello.propTypes={//此处的propTypes是组件下的一个方法
            msg:PropTypes.string//此处的PropTypes是引入的prop-types
        }
        export default Hello
    

    【状态】(state):
    状态就是组件描述某种显示情况的数据,由组件自己设置和更改,也就是说由组件自己维护,使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
    经验: 组件自己的状态只能自己更改
    定义state有两种方式
    ● 方式—:

    import React, { Component } from 'react';
    
    class Hello extends Component{
        //定义组件的状态
        state={
            msg:'这是方式一定义组件的状态'
        }
        render(){
            return(
                <div>
                    <h3>{this.state.msg}</h3>
                </div>
            )
        }
    
    }
    
    export default Hello
    

    ● 方式二:【推荐写法】

    import React, { Component } from 'react';
    
    class Hello extends Component{
        //定义组件的状态
        constructor (props){
            super(props)//super继承绑定在当前组件上面的属性
            this.state={
                info:'这是方式二定义组件的状态'
            }
        }
        render(){
            return(
                <div>
                    <h3>{this.state.info}</h3>
                </div>
            )
        }
    
    }
    
    
    export default Hello
    

    this.props和this.state是纯js对象,在vue中,data属性是利用Object.defineProperty处理过的,更改​data的数据的时候会触发数据的getter和setter,但是React中没有做这样的处理,如果直接更改的话,react是无法得知的,所以,需要使用特殊的更改状态的方法setState。

    setstate
    例如实现用一个按钮控制内容的显示与隐藏,flag存放在实例的 state 对象当中,组件的 render 函数内,会根据组件的 state 的中的flag确定内容是显示还是隐藏。下面给 button 加上了点击的事件监听。

    import React, { Component } from 'react';
    
    class Hello extends Component{
    
        constructor(){
            super()
            this.state={
                flag:true
            }
        }
    
        change(){
             this.setState({
                 flag:!this.state.flag
             })
            
        }
        render(){
            return(
                <div>
                    <button onClick={this.change.bind(this)}>修改</button>
                    {this.state.flag && <h3>使用setstate修改数据</h3>}
                </div>
            )
        }
    }
    
    export default Hello 
    

    setState有两个参数,第一个参数可以是对象,也可以是方法 【return一个对象】,我们把这个参数叫做updater
    当参数是对象时

    this.setState({
     flag: !this.state.flag
    })
    

    当参数是方法时

    this.setState((prevState, props) => {
     return {
       flag: !prevState.flag
    }
    })
    

    注意的是这个方法接收两个参数,prevState指的是上一次的state, 第二个是props
    将上面的案例可以修改为如下:

    import React, { Component } from 'react';
    
    class Hello extends Component{
    
        constructor(){
            super()
            this.state={
                flag:true
            }
        }
    
        change(){
            this.setState((prevState,props)=>{
                console.log(prevState)
                console.log(props)
                return {
                    flag:!prevState.flag
                }
            })
        }
        render(){
            return(
                <div>
                    <button onClick={this.change.bind(this)}>修改</button>
                    {this.state.flag && <h3>使用setstate修改数据</h3>}
                </div>
            )
        }
    }
    
    export default Hello 
    

    setState是异步的,所以想要获取到最新的state,没有办法获取,就有了第二个参数,这是一个可选的回调函数

    this.setState((prevState, props) => {
      return {
       flag: !this.state.flag
      }
    }, () => {
      console.log('回调里的',this.state.flag)
    })
    console.log('setState外部的',this.state.flag)
    

    【注】:属性vs状态
    相似点:都是纯js对象,都会触发render更新,都具有确定性(状态/属性相同,结果相同)
    不同点:
    属性能从父组件获取,状态不能
    属性可以由父组件修改,状态不能
    属性能在内部设置默认值,状态也可以
    属性不在组件内部修改,状态要改
    属性能设置子组件初始值,状态不可以
    属性可以修改子组件的值,状态不可以
    state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState方法进行更新,setState 会导致组件的重新渲染。
    props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的 props,否则组件的 props 永远保持不变。
    如果搞不清 state 和 props 的使用场景,记住一个简单的规则:尽量少地用 state,多用 props。
    没有 state 的组件叫无状态组件(stateless component),设置了 state 的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。这样会降低代码维护的难度,也会在一定程度上增强组件的可复用性。
    react性能优化一个方案: 就是多使用无状态组件( 函数式组件 )

    (6)受控组件与非受控组件
    React组件的数据渲染是否被调用是通过传递过来的props完全控制,控制则为受控组件,否则非受控组件。
    例如:要实现利用父组件的数据控制子组件中内容的显示与隐藏,那么示例代码如下:
    父组件代码:

    import React, { Component } from 'react';
    
    import Son from './Son'
    class Father extends Component{
    
        constructor(){
            super()
            this.state={
                flag:true
            }
    
        }
    
        change(){
            this.setState({
                flag:!this.state.flag
            })
        }
            render(){
                return(
                    <div>
                        Father:<button onClick={this.change.bind(this)}>控制按鈕</button>
                        <hr/>
                        <Son flag1={this.state.flag}></Son>
                    </div>
                )
            }  
    }
    
    export default Father
    

    子组件代码:

    import React, { Component } from 'react';
    
    class Son extends Component{
        render(){
            return(
                <div>
                {this.props.flag1&&<p>这是被Father组件控制的Son组件</p>}
                </div>
            )
        }
    }
    
    export default Son
    

    (7)数据渲染
    ● 条件渲染
    如下示例代码:

    import React, { Component } from 'react';
    
    class Event extends Component{
        constructor(){
            super()
            this.state={
                flag:false
            }
        }
    
        changeFlag=()=>{
            this.setState({
                flag:!this.state.flag
            })
        }
        render(){
            return(
                <div>
                    <h3>条件渲染</h3>
                    <button onClick={this.changeFlag}>条件渲染</button>
                    <p>{this.state.flag?'Hello World!':'你好 世界!'}</p>
                    <p>{this.state.flag&&'Hello World!'||'你好 世界!'}</p>
                    <p>{this.state.flag&& <span>Hello World! </span>||<span>你好 世界!</span>}</p>
    
                </div>
            )
        }
    }
    
    export default Event
    

    ● 列表渲染

    import React, { Component } from 'react';
    
    //定义一个组件,表示列表中的每一项
    const Item=props=>{
        console.log(props)
        return <li>{props.item1.task}</li>
    }
    class Event extends Component{
    
        constructor(){
            super()
            this.state={
                list:[
                    {
                        id:1,
                        task:'任务一'
                    },
                    {
                        id:2,
                        task:'任务二'
                    }
                ]
            }
        }
        //定义一个方法遍历list中的数据,此处的item指的是list中的数据项,Item指的是上面定义的组件
        //此处的item1={item}是为了在props中获取到list中的数据项,当然item1={item}可以改为{...item}
        //对应的上面定义组件的地方{props.item1.task}需要改成{props.task},因为此时的props指的就是
        //list中的每一条数据。
        renderItem=()=>{        
            return this.state.list.map(item=><Item item1={item} key={item.id}/>)
        }
        render(){
            return(
                <div>
                    <h3>列表循环</h3>
                    <ul>
                    {this.renderItem()}//调用方法,渲染
                    </ul>
                </div>
            )
        }
    }
    
    export default Event
    

    (8)高阶组件
    高阶组件
    高阶组件是一个函数;
    这个函数接收一个参数,这个参数是一个组件;
    高阶组件封装:

    import React, { Component } from 'react';
    
     const HOC = ( Comp ) => {
       return class extends Component{
    
        fn () {
          //一万行代码
        }
    
        render () {
          return (
            <Comp fn = { this.fn }/>
          )
        }
       }
     }
     export default HOC
    

    使用方法:
    例如定义一个A组件

    import React, { Component } from 'react';
    
    class CompA extends Component {
        
      render () {
        return (
          <div>
            comA组件
          </div>
        )
      }
    
    }
    
    
    export default CompA
    

    在其他组件中引入A组件和高阶组件,并使用高阶组件

    import React, { Component } from 'react';
    import CompA from './CompA';
    
    import HOC from './HighOrderComp'
    
    
    const HA = HOC( CompA )
    class Comp extends Component {
    
      render () {
        return (
          <div>
            <h3>高阶组件</h3>
            <HA></HA>
          </div>
        )
     }
    }
    export default Comp
    
    展开全文
  • 看得有点懵, 可能要结合其它实例看。 html <!DOCTYPE html> <html> <head> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script s...
  • React for循环渲染组件

    2020-02-24 16:32:49
    或者循环遍历渲染相同的多个组件,下面看看怎么实现: 先来个有 If 判断的字组件循环渲染: render() { // 聊天列表组件 function MsgList(props){ const list = props.list; const listItems = list.map...
  • React的跨级组件通信

    2018-12-28 23:08:52
    我们知道,react中父子组件之间的通信,父组件和子组件通信,可以通过props向子组件传递参数,子组件和父组件通信,则可以通过调用props传入的回调函数来向父组件传递参数 那么问题来了,如果是跨级组件之间的通信...
  • Redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件(如路由操作)里使用 Redux。其余内部组件仅仅是展示性的,所有数据都通过 props 传入。 那么为什么需要容器组件...
  • React组件的使用 React组件分类 ...React组件类只能包含一顶层标签。 React类式组件使用的必要条件 组件类必须继承React.Component类 必须要有render方法; render方法的return返回的就是组件的内容 类式组
  • react组件一般都是只返回一个父节点包含的元素,而我们有时候就是想返回多个元素怎么办,当然react团队也帮你想到了,两种方式:1,以数组的形式返回;2,创建React片段 例如,你想这样...遍历tbody然后在遍历td,...
  • 需求:一标签,随着条数据动态生成条标签元素 当前父组件引入了子组件; 父组件: import React, { Component } from 'react'; import './App.css'; import Footer from './components/layout/Footer'; class ...
  • react同级组件之间进行传值
  • React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件React 高阶组件React 生态中使用的非常频繁,比如react-router 中的 withRouter 以及 react-redux 中 connect 等...
  • 如果代码了之后,不可能一直在render方法里写,所以就需要把里面的代码提出来,定义一变量,像这样: import React from 'react' import ReactDOM from 'react-dom' // 这里感觉又不习惯了?这是在用JSX定义一下...
  • React学习:高阶组件

    2018-05-03 16:22:43
    高阶组件的定义类比于高...高阶组件本质上也是一个函数,并不是一个组件,这一点一定不要弄错。 更通俗地描述为,高阶组件通过包裹(wrapped)被传入的React组件,经过一系列处理,最终返回一个相对增强(enhanced...
  • 第一步: 在父组件中声明子组件ref &lt;div&gt; &lt;QuestionnaireEdit ref="QuestionnaireEdit" /&gt; &lt;/div&gt;第二步: 子组件中声明子组件的子组件的r...
  • React组件的 key

    2018-07-06 15:44:29
    react key概述key的作用react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的。简单来说,react利用key来识别组件,...
  • 使用React.createClass()方法创建组件时,需要传入一参数对象,React会根据这对象创建组件。这参数对象中,除了包含必须要实现的render方法外,还有一些组件的设置属性。组件生命周期中的一些处理函数,也是在...
  • react中不依赖redux等这些进行状态管理的话,...这里一共有四个组件Comment是最外层的容器组件,CommentInput是负责输入, 其余两个负责评论展示 子组件给父组件传值 先理解一下定义:react中state改变了,组件才会...
1 2 3 4 5 ... 20
收藏数 13,439
精华内容 5,375
关键字:

map react 多个组件