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> ); } }