React Native学习之ReactJS组件通信

ReactJS组件通信

ReactJS组件关系是嵌套的,因为使用DOM结构,组织结构比较清晰。

因此ReactJS组件包含父组件与子组件

(1)子组件如何调用父组件

this.props

(2)父组件如何调用子组件

首先使用属性ref为子组件取个名字

this.refs.名字.getDOMNode()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React组件通信</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Parent = React.createClass({
click:function(){
//父组件调用子组件
this.refs.child.getDOMNode().style.color="red";
},

render:function(){
return (
<div onClick={this.click} >Parent is :
//子组件调用父组件
<Child name={this.props.name} ref="child"></Child>
</div>
);
}
});

var Child = React.createClass({
render:function(){
return <span> {this.props.name} </span>;
}
});

ReactDOM.render(<Parent name="React语法基础" />, document.getElementById('example'));
</script>
</body>
</html>

JSX实战

React Native中没有DOM的概念,只有组件的概念,所以我们在ReactJS中使用的Html标签以及对DOM的操作是不起作用的,但是组件的生命周期、JSX的语法、事件绑定、自定义属性等,在React Native和ReactJS中是一致的。

React Native的ReactJs写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';

class Box extends Component {
render(){
return (
<View style={[BoxStyles.box,BoxStyles[this.props.width],BoxStyles[this.props.height]]}>
<View style={[BoxStyles.top,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>top</Text></View>
<View style={[BoxStyles[this.props.childName]]}>
<View style={[BoxStyles.left,BoxStyles[this.props.classBg]]}><Text>left</Text></View>
{this.props.children}
<View style={[BoxStyles.right,BoxStyles[this.props.classBg]]}><Text>right</Text></View>
</View>
<View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>bottom</Text></View>
<View style={[BoxStyles.label]}><Text>{this.props.boxName}</Text></View>
</View>
)}
}

class MargginBox extends Component{
render(){
return (
<View style={[BoxStyles.margginBox]}>
<Box childName="borderBox" height="height400" width="width400" boxName="margin" classBg="bgred">{this.props.children}</Box>
</View>
)}
}

class BorderBox extends Component{
render(){
return (
<Box childName="paddingBox" height="height300" width="width300" boxName="border" classBg="bggreen" >{this.props.children}</Box>
)}
}

class PaddingBox extends Component{
render(){
return (
<Box childName="elementBox" height="height200" width="width200" boxName="padding" classBg="bgyellow" >{this.props.children}</Box>
)}
}

class ElementBox extends Component{
render(){
return (
<View style={[BoxStyles.box,BoxStyles.height100]}>
<View style={[BoxStyles.measureBox]}>
<View style={[BoxStyles.right]}><Text>height</Text></View>
</View>
<View style={[BoxStyles.bottom,BoxStyles.height50]} ><Text>width</Text></View>
<View style={[BoxStyles.label]}><Text>element</Text></View>
<View style={[BoxStyles.widthdashed]}></View>
<View style={[BoxStyles.heightdashed]}></View>
</View>
)}
}

class AppBlog extends Component {
render(){
return (
<MargginBox>
<BorderBox>
<PaddingBox>
<ElementBox>
</ElementBox>
</PaddingBox>
</BorderBox>
</MargginBox>
)}
}

const BoxStyles = StyleSheet.create({
height50:{
height: 50,
},
height400:{
height: 400,
},
height300:{
height: 300,
},
height200:{
height: 200,
},
height100:{
height: 100,
},
width400:{
width: 400,
},
width300:{
width: 300,
},
width200:{
width: 200,
},
width100:{
width: 100,
},
bgred: {
backgroundColor:'#6AC5AC',
},
bggreen: {
backgroundColor: '#414142',
},
bgyellow: {
backgroundColor: '#D64078',
},
box: {
flexDirection: 'column',
flex: 1,
position: 'relative',
},
label: {
top: 0,
left: 0,
paddingTop: 0,
paddingRight: 3,
paddingBottom: 3,
paddingLeft: 0,
position: 'absolute',
backgroundColor: '#FDC72F',
},
top: {
justifyContent: 'center',
alignItems: 'center',
},
bottom: {
justifyContent: 'center',
alignItems: 'center',
},
right: {
width: 50,
justifyContent: 'space-around',
alignItems: 'center',
},
left: {
width: 50,
justifyContent: 'space-around',
alignItems: 'center',
},
heightdashed: {
bottom: 0,
top: 0,
right: 20,
borderLeftWidth: 1,
position: 'absolute',
borderLeftColor: '#FDC72F',
},
widthdashed: {
bottom: 25,
left: 0,
right: 0,
borderTopWidth: 1,
position: 'absolute',
borderTopColor: '#FDC72F',
},
yellow: {
color: '#FDC72F',
fontWeight:'900',
},
white: {
color: 'white',
fontWeight:'900',
},
margginBox:{
position: 'absolute',
top: 100,
paddingLeft:7,
paddingRight:7,
},
borderBox:{
flex: 1,
justifyContent: 'space-between',
flexDirection: 'row',
},
paddingBox:{
flex: 1,
justifyContent: 'space-between',
flexDirection: 'row',
},
elementBox:{
flex: 1,
justifyContent: 'space-between',
flexDirection: 'row',
},
measureBox:{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems:'flex-end',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

AppRegistry.registerComponent('AppBlog', () => AppBlog);

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :