zoukankan      html  css  js  c++  java
  • react--父子组件传参

    新增Child.js文件

    import React from 'react';
    
    export default class Child extends React.Component{
        render(){
            return (
                <div>
                    <p>我是子组件</p>
                    <p>{this.props.value}</p>
                </div>
            )
        }
    }

    修改Home2.js文import React from 'react';

    import {Link} from "react-router-dom";
    import Child from './Child';
    
    export default class Home2 extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                father: 'father'
            }
        }
    
        changeRoute = () => {
            this.props.history.push('/twoPage');
        };
    
        render(){
            return (
                <div>
                    <div>
                        <p>我是Home2组件</p>
                        <Link to="/onePage">点我跳转到one页面</Link><br/>
                        <Link to="/twoPage/2">点我跳转到two页面</Link><br/>
                        <Link to="/this">点我跳转到this页面</Link>
                        <p onClick={this.changeRoute}>点我试试</p>
                    </div>
                    <div>
                        <p>我是父组件</p>
    <Child value={this.state.father} /> </div> </div> ) } }
    父传子
    import进来的组件名是什么,标签名就是什么,然后value这个key是随便起的,但要跟Child组件里的this.props.value一致就OK
    比如
    <Child str={this.state.father} />
    对应的Child里的获取key要改成<p>{this.props.str}</p>  这跟路由系统的to和path要一致是一个道理

    子传父

    父组件Home2.js
    import React from 'react';
    import {Link} from "react-router-dom";
    import Child from './Child';
    
    export default class Home2 extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                father: 'father',
                childValue: ''
            }
        }
    
        changeRoute = () => {
            this.props.history.push('/twoPage');
        };
    
        getChildValue = (val) => {
            if(val){
                this.setState({
                    childValue: val
                })
            }
        };
    
        render(){
            return (
                <div>
                    <div>
                        <p>我是Home2组件</p>
                        <Link to="/onePage">点我跳转到one页面</Link><br/>
                        <Link to="/twoPage/2">点我跳转到two页面</Link><br/>
                        <Link to="/this">点我跳转到this页面</Link>
                        <p onClick={this.changeRoute}>点我试试</p>
                    </div>
                    <div>
                        <p>我是父组件</p>
                        <Child value={this.state.father} getChildValue={this.getChildValue} />
                        <p>{this.state.childValue}</p>
                    </div>
                </div>
            )
        }
    }

    子组件Child.js:

    import React from 'react';
    
    export default class Child extends React.Component{
        constructor(props){
            super(props);
            this.state ={
                child: 'child'
            }
        }
    
        forFatherValue = () => {
            this.props.getChildValue(this.state.child)
        };
    
        render(){
            return (
                <div>
                    <p>我是子组件</p>
                    <p>{this.props.value}</p>
                    <p onClick={this.forFatherValue}>点我给父组件传递参数</p>
                </div>
            )
        }
    }
    只需要在子组件标签上添加父组件的事件,这个事件要能接收参数,子组件传递过来的值就在这个参数里,还要注意子组件调用的是子组件的方法,
    方法内部才是this.props.父组件绑定的key,这个key也是自己想取什么都可以,绑定什么key子组件方法内部就调用什么key,多试几遍就能记住。
  • 相关阅读:
    js截取字符串区分汉字字母代码
    List 去处自定义重复对象方法
    63. Unique Paths II
    62. Unique Paths
    388. Longest Absolute File Path
    41. First Missing Positive
    140. Word Break II
    139. Word Break
    239. Sliding Window Maximum
    5. Longest Palindromic Substring
  • 原文地址:https://www.cnblogs.com/huangjie2018/p/10690857.html
Copyright © 2011-2022 走看看