一、父子组件传参
/*
* 子组件
**/
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);//截
网友评论