主页面新闻页面:
import React, { Component } from 'react';
import '../assets/css/index.css'
// import logo from '../assets/images/logo.svg';
import Header from './Header';
import Footer from './Footer'
class News extends React.Component {
constructor(props) {
super(props) /*用于父子组件传值 */
//定义数据
this.state = {
msg:'我是新闻的msg',
title:'新闻组件'
}
}
run=()=>{
alert("我是父组件的run方法")
}
//获取子组件里面传过来的数据
getChildData=(result)=>{
alert(result)
this.setState({
msg:result
})
}
getFooter=()=>{
// alert(this.refs.footer.state.msg)
this.refs.footer.run();
}
getData=()=>{
alert(this.state.title)
}
render() {// eslint-disable-next-line
return (
// eslint-disable-next-line
<div>
<Header title={this.state.title} run={this.run} news={this}/>
<br />
<hr />
<br />
这是新闻组件的内容---{this.state.msg}
<br />
<button onClick={this.getFooter}>获取整个底部组件</button>
<br />
<hr />
<br />
<Footer ref='footer' />
</div>
)
}
}
export default News;
引入头部组件:Header.js
import React, { Component } from 'react';
class Header extends Component{
constructor(props){
super(props);
this.state={
msg:'这是一个头部组件'
}
}
getNews=()=>{
alert(this.props.news.state.msg)
}
render() {
return(
<div>
<h2>{this.props.title}</h2>
<button onClick={this.props.run}>调用news父组件的run</button>
<br /><br />
<button onClick={this.props.news.getData}>调用news组件的getData方法</button>
<br /><br />
<button onClick={this.getNews}>获取整个news实例</button>
<br /><br />
<button onClick={this.props.news.getChildData.bind(this,"klll")}>子组件给父组件传值</button>
</div>
)
}
}
export default Header;
引入底部组件:Footer.js
import React, { Component } from 'react';
class Footer extends Component{
constructor(props){
super(props);
this.state={
msg:'这是一个底部组件'
}
}
run=()=>{
alert('这是底部组件的run方法')
}
render() {
return(
<div>
<h2>{this.state.msg}</h2>
</div>
)
}
}
export default Footer;
P.S.:父子组件间传值(通信)
父组件给子组件传值:
1、在调用子组件的时候定义一个属性 <Header title={this.state.title} run={this.run} news={this}/>
2、子组件里面的this.props.title
父组件主动获取子组件的数据:
1、调用子组件的时候指向ref的值 <Header ref='header' />
2、通过this.refs.header获取整个子组件的实例(dom(组件)加载完成以后获取)