react redux 学习2

最新推荐文章于 2024-08-22 15:27:02 发布

杭州大白菜

最新推荐文章于 2024-08-22 15:27:02 发布

阅读量209

点赞数

本文链接：https://blog.csdn.net/wellfuture/article/details/76563114

版权

自定义组件

import React ,{Component} from 'react';
import ReactDOM from 'react-dom';

//var 全局
//let  有做用域
//const 常量 不能修改
//Es5
let Person1=React.createClass(
    {
        render:function () {
            return <h1>Es5</h1>;
        }
    }
);


//es6
class 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';

//es6
class 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';

//es6
class 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';

//es6
class 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';

//es6
class 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';
//es6
class 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
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫