循环,if条件,跳转,组件

66 阅读1分钟
import React from 'react';
import styles from './style.less';
import Child from './Child'
import {Form} from 'antd';
import {router} from 'umi';
import { color } from 'echarts';
class ABC extends React.Component {
        constructor(props) {
                super(props);
                this.state = {
                        title:"项目"
        }
        }
        //挂载之后自动触发
        componentDidMount(){
                console.log('触发了')
                this.setState({
                        title:"您好"
                })
        }
        btnClick=(e,i)=>{
                console.log('====',e,i)
                this.setState({
                        title:e
                })
        }
        updateTitle=(w)=>{
                console.log('====tt',w)
                router.push({pathname: '/einterbusi/foreignexchangetrade/exchgpurchase',query:{
                        name:'侧翼意思'
                }})
        }
    render() {
                let arry=[{
                        name:'cs'
                },{
                        name:'cs2'
                },{
                        name:'cs3'
                }]
                let dataName
                if (this.state.title=='cs4') {
                        dataName=<p>你好</p>		
                }else{
                        dataName=<p>测试题</p>		
                }
        return (
            <div>
                                {/* <Child name={this.state.title}></Child> */}
                <h1 style={{color:'red'}}>{this.state.title}</h1>
                                {arry.map((item,inx)=>(
                                        <span className={styles.nameTitle} onClick={() => this.btnClick(item.name,inx)}>
                                        {item.name}
                                </span>
                                ))}
                                {this.state.title=='cs3'?<Child name={this.state.title} arry={arry} updateTitle={this.updateTitle}></Child>
:''}
<div style={{fontSize:'50px'}}>
{dataName}
</div>
            </div>
        )
    }
}
export default Form.create()(ABC)

子组件

 import React from 'react';
import {Form} from 'antd';

class Child extends React.Component{
    btnClick=(e,w)=>{
        this.props.updateTitle(e,w);
    }
    render() {
        console.log('====yyy',this.props.arry)
        let obj={
            name:this.props.name,
            cs:"cs4"
        }
        return (
            <div>
                <div>Hello, {this.props.name}!</div>
                <button onClick={()=>this.btnClick(obj)}>点击一下</button>
            </div>
        )
      }
}
Child.defaultProps = {
    arry: [], // 设置默认值为空数组
  };
export default Form.create()(Child)

页面跳转接收值

 componentDidMount() {
        this.setState({
            cities:this.props.location.query.name
        })
}