react组件通信1

父组件向子组件通信：

父组件拿到子组件的实例，然后调用子组件的方法。

父组件可以向子组件通过传 props 的方式，向子组件进行通讯。

Child.jsx

import React from 'react';
import PropTypes from 'prop-types';

export default function Child({ name }) {
    return <h1>Hello, {name}</h1>;
}

Child.propTypes = {
    name: PropTypes.string.isRequired,
};

Parent.jsx

import React, { Component } from 'react';

import Child from './Child';

class Parent extends Component {
    render() {
        return (
            <div>
                <Child name="Sara" />
            </div>
        );
    }
}

export default Parent;

子组件向父组件通信：父组件把函数传递给子组件，然后子组件调用。子组件影响了父组件的数据和展示；

通过回调。将父组件的函数传递给子组件。子组件触发。

List3.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class List3 extends Component {
    static propTypes = {
        hideConponent: PropTypes.func.isRequired,
    }
    render() {
        return (
            <div>
                哈哈,我是List3
                <button onClick={this.props.hideConponent}>隐藏List3组件</button>
            </div>
        );
    }
}

export default List3;

App.jsx

import React, { Component } from 'react';

import List3 from './components/List3';
export default class App extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            isShowList3: false,
        };
    }
    showConponent = () => {
        this.setState({
            isShowList3: true,
        });
    }
    hideConponent = () => {
        this.setState({
            isShowList3: false,
        });
    }
    render() {
        return (
            <div>
                <button onClick={this.showConponent}>显示Lists组件</button>
                {
                    this.state.isShowList3 ?
                        <List3 hideConponent={this.hideConponent} />
                    :
                    null
                }

            </div>
        );
    }
}

 

兄弟组件通信：包含子父组件和父子组件

import React,{Component} from 'react';
import './App.css';

class Action extends Component{
	constructor(props) {
		super(props);
		this.state = {
			value: ''
		}
	}

	render() {
		return (
			<div>
				<input value={this.state.value} onChange={(e) =>{this.setState({value: e.target.value}); }}/>//修改state.value
				<button onClick={() => {
					this.props.onAdd(this.state.value)
					this.setState({
						value: ''
					})//调用父组件的函数；修改父组件的数据
				}}>提交</button>
			</div>
		);
	}
}

class List extends Component{
	render() {
		return (
			<div>
				{this.props.data.map(item => <p key={item.id}>{item.name}</p>)}
			</div>
		);
	}
}


class App extends React.Component{
	constructor(props) {
		super(props);
		this.state = {
			data: [
				{name: 'a',id:0},
				{name: 'b',id:1},
				{name: 'c',id:2}
			],
			value: ''
		}
	}


	render() {

		return (
			<div>
				 <Action
				    onAdd={(name) => {
				    	let {data} = this.state
					    data.push({
						    name,
						    id: name
					    })
					    this.setState({
						    data
					    })
				    }}
				 />

				 <List data={this.state.data}/>//传值给list；更新渲染；
			</div>
		);
	}
}