React（二）组件通信
组件通信：(react版本是15版本，可能和16版本的操作有部分差异)
父子组件：
父=>子
- 用props：
-
通过ref进行标记
1.用props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Life</title>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: lightgreen;
}
.yes{
background: lightblue;
}
.no{
background: lightcoral;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Father = React.createClass({
getInitialState(){
return{
isTrue:'Hello'
}
},
render() {
return (
<li>{/*组件传参，用bind绑定this，以取到this.state.isTrue，
将this.state.isTrue作为属性传到子组件中
*/}
<div onClick={this.clickHandler.bind(this,this.state.isTrue)}></div>
<Son name={this.state.isTrue}/>
</li>
);
},
clickHandler(a){
// 将state的值改变，使Hello取World，World取Hello
this.setState({isTrue:this.state.isTrue=='Hello'?'World':'Hello'});
}
});
var Son = React.createClass({
render() {//取到父组件的值，修改颜色
return (
<div className={this.props.name==='Hello'?'yes':'no'}>{this.props.name}</div>
);
}
});
ReactDOM.render(<Father/>,app);
</script>
</body>
</html>2.ref标记：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Life</title>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: lightgreen;
}
.yes{
background: lightblue;
}
.no{
background: lightcoral;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Father = React.createClass({
init(){
this.self.clickHandler()//执行子组件的方法
},
render() {
return (
<li>
<div onClick={this.init}></div>
<Son ref={(el)=> this.self=el}/>{/*绑定一个标记绑定在自己身上，使this.self等于子组件，于是调用this.self以达到调用子组件的方法*/}
</li>
);
}
});
var Son = React.createClass({
getInitialState(){
return{
str:'Hello'
}
},
render() {
return (
<div className={this.state.str==='Hello'?'yes':'no'}>{this.state.str}</div>
);
},
clickHandler(){
// 将state的值改变，使Hello取World，World取Hello，该方法被父组件调用
this.setState({str:this.state.str=='Hello'?'World':'Hello'});
}
});
ReactDOM.render(<Father/>,app);
</script>
</body>
</html>子=>父：
通过子组件调用父组件的函数传递信息
下面是个简单的小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>s_f</title>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: lightgreen;
}
.yes {
background: lightblue;
}
.no {
background: lightcoral;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Father = React.createClass({
getInitialState() {
return {
str: "Hello"
};
},
render() {
return (
<li>{/*父组件添加点击事件改变自身颜色和数据，并将自己的函数和state附在子组件的属性上*/}
<div className={this.state.str==='Hello'?'yes':'no'} onClick={this.clickHandler}>{this.state.str}</div>
<Son Fn={this.clickHandler} str={this.state.str} />
</li>
);
},
clickHandler() {//点击事件，单击时将world换成hello，hello换成world
this.setState({ str: this.state.str == "Hello" ? "World" : "Hello" });
}
});
var Son = React.createClass({
render() {
return ({/*子组件中将调用父组件传过来的函数及数据，并修改自身样式，达到子组件修改父组件的方法，从而父组件变化，子组件也变化，子组件变化，父组件也变化*/}
<div className={this.props.str==='Hello'?'no':'yes'} onClick={this.props.Fn}>{this.props.str}
</div>
);
}
});
ReactDOM.render(<Father/>, app);
</script>
</body>
</html>简单的兄弟组件（非redux、flux）
将以上两种结合即可，子传父，父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>s_s</title>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: lightgreen;
}
.yes {
background: lightblue;
}
.no {
background: lightcoral;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Father = React.createClass({
getInitialState() {
return {
str: "Hello"
};
},
render() {
return (
<li>{/*父组件添加点击事件改变自身颜色和数据，并将自己的函数和state附在子组件的属性上*/}
<div>{this.state.str}</div>
<Son Fn={this.clickHandler}/>{/*Son组件触发父组件的事件*/}
<Son1 str={this.state.str}/>{/*父组件将数据更新传给Son1组件*/}
</li>
);
},
clickHandler() {//点击事件，单击时将world换成hello，hello换成world
this.setState({ str: this.state.str == "Hello" ? "World" : "Hello" });
}
});
var Son = React.createClass({
render() {//Son触发事件改变数据
return (
<div onClick={this.props.Fn}>Son
</div>
);
}
});
var Son1 = React.createClass({
render() {//Son1对传来的数据进行改变
return (
<div className={this.props.str==='Hello'?'no':'yes'}>Son1
</div>
);
}
});
ReactDOM.render(<Father/>, app);
</script>
</body>
</html>
