美文网首页
总也记不住的react语法

总也记不住的react语法

作者: ThemisHoo | 来源:发表于2019-08-17 11:31 被阅读0次

一、父子组件传参

/*
 *  子组件
**/
import React, { Component } from 'react';

export default class Position extends Component {
    state = {
        endPosition: []
    }

    componentDidMount() {
        // startPosition 为父组件向子组件传的参数
        const { startPosition } = this.props
    }
    handleClick = () => {
        const { endPosition } = this.state
        // endPosition 为子组件向父组件传的参数
        this.props.GetPosition(endPosition)
    }
    render() {
        return(
            <div>
                <button onClick={this.handleClick}></button>
            </div>
        )
    }
}
/*
 *  父组件
**/
import React, { Component } from 'react';
import Child from './Child'

export default class Father extends Component {
    state = {
         startPosition: []
    }

    // 子组件调用触发的方法,参数为子组件中传入
    setPosition = e => {
        console.log(e)
        this.setState({
            endPosition: e
        })
    }

    render() {
        // startPosition 为父组件向子组件传参
        // GetPosition 为子组件中触发的方法
        const { startPosition } = this.state
        return(
            <div>
                <Child history={this.props.history} startPosition={startPosition} GetPosition={this.setPosition}/>
            </div>
        )
    }
}

二、DOM中渲染数组数据

{
    markContent.length && markContent.map((e, idex) => {
      return <p>{idex}.{e}</p>
    })
}

三、Ant 中使用 Form

import { Form } from 'antd'
const FormItem = Form.Item

class Taskrelease extends BaseComponent{
}

const WrappedRegistrationForm = Form.create()(Taskrelease)
export default WrappedRegistrationForm

四、动态加载内容

render() {
    const { renderContent } = this.state
    const Content1 = <div>内容1</div>
    const Content2 = <div>内容2</div>
    return(
        <div>
            { renderContent === 1 ? Content1 : Content2}
        </div>
    )
}

五、禁止鼠标右键

onContextMenu={(e) => { e.preventDefault()}}

六、取文件名后缀

        let fileName = data.file.name.lastIndexOf(".");//取到文件名开始到最后一个点的长度
        let fileNameLength = data.file.name.length;//取到文件名长度
        let fileFormat = data.file.name.substring(fileName + 1, fileNameLength);//截

相关文章

  • 总也记不住的react语法

    一、父子组件传参 二、DOM中渲染数组数据 三、Ant 中使用 Form 四、动态加载内容 五、禁止鼠标右键 六、...

  • 语音,真正的入门第一课。

    学好真正地道的英语,就要从语音入手。 有很多朋友问都有这样的疑问:我每天都很努力的背词汇,可总也记不住呀。这条语法...

  • 初试react

    这是学习react时写的第一个react文件,(holle react)使用es6语法和JSX语法) 在react...

  • WebStrom React 开发配置(持续更新)

    React语法无自动提示 React (webpack.config.js)等语法无法识别 javascript ...

  • react语法结构

    1.react JSX语法原理 react是函数式编程,使用jsx语法来渲染组件。jsx语法是合法的JavaScr...

  • 那些年,总也记不住的AttributeName

  • 2019-11-27

    英语啊英语 为什么学英语这么难!背课文背不过,单词总也记不住!有时觉得很奇怪,为什么总也记不住那?读也读了,写也写...

  • React Native创建新项目

    前言 React Native 是基于 React 框架搭建而成的,使用的是JavaScript语法。React ...

  • (二)react入门

    react使用的是JSX语法,和vue、小程序语法类似 class属性在react中要写成className 创建...

  • (React)认识React语法

    一、JSX语法 在React中,没有使用HTML标签来绘制UI,而是使用了JSX语法。 当然JSX语法中,也可以嵌...

网友评论

      本文标题:总也记不住的react语法

      本文链接:https://www.haomeiwen.com/subject/kgxtsctx.html