react redux 学习2

来源：互联网发布：淘宝网红直播推广费用编辑：程序博客网时间：2024/05/20 11:33

自定义组件

import React ,{Component} from 'react';import ReactDOM from 'react-dom';//var 全局//let  有做用域//const 常量 不能修改//Es5let Person1=React.createClass(    {        render:function () {            return <h1>Es5</h1>;        }    });//es6class Person2 extends Component{       render()       {           return <h1>Es6</h1>;       }}ReactDOM.render(    <div>    <Person1/>        <Person2/>    </div>    ,    document.getElementById('root1'));

这里 Person1 Person2为自定义组件，建议用es6语法，这样容易过渡到react-native

require 跟 import

在src新建一个Car.js

import  React ,{Component} from  'react';//es6class Car extends Component{    render()    {        return (<h1>Car list</h1>);    }}export default Car;//这一句一定要写 允许导出

使用：index.js ，注意car.js的引用语法

import React ,{Component} from 'react';import ReactDOM from 'react-dom';import Car from './Car';ReactDOM.render(    <div>        <Car/>    </div>    ,    document.getElementById('root1'));

自定义组件的属性值

index.html

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <meta name="theme-color" content="#000000">  <title>react reduct </title></head><body><div id="root"></div></body></html>

自定义组件Car.js改为：

import  React ,{Component} from  'react';//es6class Car extends Component{    render()    {        return (            <div>            <h1>carbrand:{this.props.brand}</h1>            <h1>speed:{this.props.speed}</h1>                <h1>price:{this.props.price}</h1>            </div>        );    }}export default Car;//module.exports=Car;

index.js改为：

import React ,{Component} from 'react';import ReactDOM from 'react-dom';import Car from './Car';ReactDOM.render(    <div>        <Car brand="audi" speed="200Km/h" price="20万" />    </div>    ,    document.getElementById('root'));

组件加入默认值

import  React ,{Component} from  'react';//es6class Car extends Component{    //默认值    static get defaultProps(){        return {            brand:'无品牌',            speed:0,            price:0        }    }    render()    {        return (            <div>            <h1>carbrand:{this.props.brand}</h1>            <h1>speed:{this.props.speed}</h1>                <h1>price:{this.props.price}</h1>            </div>        );    }}export default Car;

另外的方法：不建议

import  React ,{Component} from  'react';//es6class Car extends Component{    //默认值 /*   static get defaultProps(){        return {            brand:'无品牌',            speed:0,            price:0        }    }*/    render()    {        return (            <div>            <h1>carbrand:{this.props.brand}</h1>            <h1>speed:{this.props.speed}</h1>                <h1>price:{this.props.price}</h1>            </div>        );    }}Car.defaultProps={        brand:'无品牌',        speed:0,        price:0 }export default Car;//module.exports=Car;

再对属性进行限制：

import  React ,{Component, PropTypes} from  'react';//es6class Car extends Component{    //默认值   static get defaultProps(){        return {            brand:'无品牌',            speed:0,            price:0        }    }    static propTypes={        brand: PropTypes.string.isRequired,        speed: PropTypes.string.isRequired,        price: PropTypes.string.isRequired,    }    render()    {        return (            <div>            <h1>carbrand:{this.props.brand}</h1>            <h1>speed:{this.props.speed}</h1>                <h1>price:{this.props.price}</h1>            </div>        );    }}export default Car;//module.exports=Car;

顶0踩0

阅读全文

0 0