Job-react 基础知识回顾之组件内部state
2017-11-25 10:56
525 查看
组件内部通过state 管理状态
JSX 本质就是js ,所以直接 数组.map 渲染列表
Constructor设置初始状态,记得执行super ,(props)
State就是一个不可变的对象,使用this.state 获取
import React from "react" class App extends React.Component{ render(){ const leader = "Kormma!!!" return ( <div> <h4>魔鬼队伍SKT T1 ,Coach {leader}</h4> <Faker AP = "Faker"></Faker> <Bang ADC = "Bang" ></Bang> <Bengi></Bengi> <Impact></Impact> <Wolf></Wolf> <EDG leader = "ClearLove"></EDG> </div> ) } } class Faker extends React.Component{ constructor(props){ super(props) this.state = { fansBoys:["Scout","Peanut","Rookie"] } } render (){ return( <div> <h2>SKT队长,{this.props.Ap}</h2> <ul> {this.state.fansBoys.map(v=>{ return <li key={v}> {v} </li> })} </ul> </div> ) } } class Bang extends React.Component{ render(){ // const leader = "Bang!!!" return <h2>AD Carry,{this.props.ADC}</h2> } } class Bengi extends React.Component{ render(){ const leader = "Bengi!!!!" return <h2>打野,{leader}</h2> } } class Impact extends React.Component{ render(){ const leader = "Impact" return <h2>上单,{leader}</h2> } } class Wolf extends React.Component{ render(){ const leader = "Wolf" return <h2>辅助,{leader}</h2> } } function EDG (props){ return <h5>EDG 队长 ,{props.leader}</h5> } export default App
相关文章推荐
- job-react 基础知识回顾1
- react(三)组件内部状态state使用方式
- React.js 基础入门三 ---组件状态state
- 爬虫基础知识回顾一
- Java基础知识回顾-8
- React Native知识5-Touchable类组件
- Java基础知识——集合体系回顾整理(List Set Map)
- Java基础知识强化之IO流笔记72:NIO之 NIO核心组件(NIO使用代码示例)
- Android基础知识之四大组件Activity(一)什么是Activity?
- Yii框架官方指南系列10——基础知识:组件
- java零基础知识回顾(集合小结)
- React Js之组件(Component)与state
- java基础知识回顾(3)
- React-Native 基础(三) 使用State改变状态
- java基础知识回顾之javaIO类--File类应用:过滤器接口FilenameFilter和FileFilter
- AJAX回顾基础知识总结
- java基础知识回顾---List,set,Map 的用法和区别
- 第三部分:Android 应用程序接口指南---第一节:应用程序组件---第三章3-1Content Provider基础知识
- java基础知识回顾之---java String final类普通方法
- Shiro入门这篇就够了【Shiro的基础知识、回顾URL拦截】