通过this.props.match.params.groupId得到跳转页面的id
getGroupId:this.props.match.params.groupId,
获取当前路径url信息
当前页面必须是路由页面才有此属性,如果不是,需要
import {withRouter} from ‘react-router-dom’
export default withRouter(LeftNax)
const path=this.props.location
const pathname=this.props.location.pathname
const query=this.props.location.query
使页面跳转到对应的url
this.props.history.replace('/userystem')
this.props.history.push('/userystem')
this.props.history.goBack()
replace与push区别是:
replace不可以使得页面回退,而push可以
父组件向子组件传值
<BubbleChart
bubbleClickData={this.bubbleClickData}
colorChange={bubbleData}
/>
子组件
color:this.props.colorChange===item.name?'#0066FF':'grey'
子组件向父组件传值(点击事件)不能写onClick,而是onEvents
子组件调用父组件的方法
<ReactEchart theme="macarons" option={this.setBarOption(this.props.data)} onEvents={this.onclick}/>
onclick = {
'click': this.clickEchartsBubble.bind(this)
}
clickEchartsBubble(e) {
this.props.bubbleClickData(e.data.name) //e气泡的各种信息
}
父组件
bubbleClickData=(data)=>{
this.setState({
bubbleData:data
})
}
父组件调用子组件的方法
子组件
getDetail=()=>{
return draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
}
父组件
this.editor=React.createRef()
const detail=this.editor.current.getDetail()
<RichTextEditor ref={this.editor}/> //引入的子组件
value=12345454
value.replace(/(\d)(?=(?:\d{3})+$)/g, ‘$1,’)
利用正则表达式将数字以三位数分割
value=12,345,454