zoukankan      html  css  js  c++  java
  • React组件及其三大属性

    2.React组件及其三大属性

    2.1函数式组件

        function Demo(){
            console.log(this)
            return <h2> 函数式组件</h2>
        }
        // ReactDOM.render(Demo(), document.getElementById('test'))
        ReactDOM.render(<Demo />, document.getElementById('test'))
    

    2.2类式组件

        class MyComponent extends React.Component {
            render(){
                console.log('render中的this: ', this)
                return (
                    <h2>类式组件</h2>
                )
            }
        }
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
    

    2.3使用state属性及简写方式

        class Weather extends React.Component {
    
            // 构造器调用几次? ---------  1次
            constructor(props) {
                super(props);
                // 解决handClick中this的指向, 将this指向绑定到当前实例
                this.handClick = this.handClick.bind(this)
                this.state = {
                    isHot: true,
                    wind: '微风'
                }
            }
    
            // handClick调用几次? ----- 点击一次调用一次
            handClick() {
                // 类中的方法默认开启了严格模式
                // handClick是在Weather类原型上,供实例使用 
                // 由于handClick作为onClick的回调,所以不是通过实例调用,而是直接调用,所以this为undefined
                console.log(this)
                this.setState({
                    isHot: !this.state.isHot
                })
            }
    
            // render调用几次? --- 1+n次
            // 1:初始化一次, n:状态更改就调用
            render() {
                const {isHot, wind} = this.state
                return (
                    <h2 onClick={this.handClick}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h2>
    
                )
            }
        }
    
        ReactDOM.render(<Weather/>, document.getElementById('test'))
    

    state简写方式:

        class Weather extends React.Component {
    
            // state简写方式
            state = {
                    isHot: true,
                    wind: '微风'
                }
    
            // 自定义方法 ----  要用赋值语句的形式+箭头函数
            // 使用箭头函数是因为其内部this会指向外层的this
            handClick = () => {
                console.log(this)
                this.setState({
                    isHot: !this.state.isHot
                })
            }
            render() {
                console.log(this)
                const {isHot, wind} = this.state
                return (
                    <h2 onClick={this.handClick}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h2>
    
                )
            }
        }
    
        ReactDOM.render(<Weather/>, document.getElementById('test'))
    

    2.4 props属性

    基本使用

        class Person extends React.Component {
            constructor(props) {
                // 构造器是否接收props, 是否传递给super,取决于:是否希望在构造器中通过this访问props
                super(props);
                console.log('constructor:', this.props)
            }
    
            render(){
                // console.log(this)
                // 通过结构赋值接收传递参数
                const {name, age, gender} = this.props
                // props是只读的
                // this.props.name = 'jack'  // 报错,只读不可修改
                return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{gender}</li>
                        <li>年龄:{age}</li>
                    </ul>
                )
            }
        }
    	// 对标签属性进行类型、必要性的检测
        Person.propTypes = {
            name: PropTypes.string.isRequired,   // 限制name为字符串类型且必填
            gender: PropTypes.string,
            age: PropTypes.number,
            speak: PropTypes.func,
        }
        // 指定默认标签属性值
        Person.defaultProps = {
            gender: '药拐',
            age: 18
        }
    
        ReactDOM.render(<Person age={19} gender="man" speak={speak}/>, document.getElementById('test'))
        ReactDOM.render(<Person name="wiki" age={18} gender="woman"/>, document.getElementById('test1'))
    
        const p = {name: 'jack', age: 18, gender: 'woman'}
        // 通过...运算符解压赋值传递给Person组件
        ReactDOM.render(<Person {...p} />, document.getElementById('test2'))
    

    类的静态属性方式限制:

            // 对标签属性进行类型、必要性的检测
            // static添加类的属性
            static propTypes = {
                name: PropTypes.string.isRequired,   // 限制name为字符串类型且必填
                gender: PropTypes.string,
                age: PropTypes.number,
                speak: PropTypes.func,
            }
            // 指定默认标签属性值
            static defaultProps = {
                gender: '药拐',
                age: 18
            }
    

    函数式组件使用props

    
        function Person(props){
            const {name, age, gender} = props
            return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{gender}</li>
                        <li>年龄:{age}</li>
                    </ul>
                )
        }
        ReactDOM.render(<Person name='jerry' age={19} gender="man" />, document.getElementById('test'))
    

    2.5 ref属性

    1.字符串形式:

        class Demo extends React.Component {
            showData = () => {
                const {input1} = this.refs
                alert(input1.value)
            }
            showData2 = () => {
                // 字符串形式通过this.refs获取
                const {input2} = this.refs
                alert(input2.value)
            }
            render(){
                return (
                    <div>
                        <label>
                            <input ref="input1" type="text" placeholder="点击按钮显示数据" />
                        </label>&nbsp;
                        <button  onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点显示数据" />
    
                    </div>
                )
            }
        }
    
        ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))
    

    2.回调函数形式

        class Demo extends React.Component {
            showData = () => {
                // 通过解构赋值取出ref
                const {input1} = this
                alert(input1.value)
            }
            showData2 = () => {
                const {input2} = this
                alert(input2.value)
            }
            render(){
                return (
                    <div>
                        <label>
                                        {/* 将当前事件绑定到this.input1上 */}
                            <input ref={(c) =>{this.input1 = c}} type="text" placeholder="点击按钮显示数据" />
                        </label>&nbsp;
                        <button  onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={(c) =>{this.input2 = c}} type="text" placeholder="失去焦点显示数据" />
    
                    </div>
                )
            }
        }
    
        ReactDOM.render(<Demo />, document.getElementById('test'))
    
    1. createRef的使用
        class Demo extends React.Component {
            /*
                React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的
             */
            myRef = React.createRef()
            myRef2 = React.createRef()
    
            showData = () => {
                console.log(this.myRef.current)
                alert(this.myRef.current.value)
            }
            showData2 = () => {
                console.log(this.myRef2.current)
                alert(this.myRef2.current.value)
            }
            render(){
                return (
                    <div>
                        <label>
                            <input ref={this.myRef} type="text" placeholder="点击按钮显示数据" />
                        </label>&nbsp;
                        <button  onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点显示数据" />
                    </div>
                )
            }
        }
    
        ReactDOM.render(<Demo />, document.getElementById('test'))
    
  • 相关阅读:
    springboot文件上传: 单个文件上传 和 多个文件上传
    Eclipse:很不错的插件-devStyle,将你的eclipse变成idea风格
    springboot项目搭建:结构和入门程序
    POJ 3169 Layout 差分约束系统
    POJ 3723 Conscription 最小生成树
    POJ 3255 Roadblocks 次短路
    UVA 11367 Full Tank? 最短路
    UVA 10269 Adventure of Super Mario 最短路
    UVA 10603 Fill 最短路
    POJ 2431 Expedition 优先队列
  • 原文地址:https://www.cnblogs.com/guapitomjoy/p/15223285.html
Copyright © 2011-2022 走看看