React Native学习之ReactJS组件通信

Joe.Ye • 2023-02-25 • React Native

ReactJS组件通信

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

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

（1）子组件如何调用父组件

this.props

（2）父组件如何调用子组件

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

this.refs.名字.getDOMNode()

<!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写法

/**
 * 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);

版权声明：
作者：Joe.Ye
链接：https://www.appblog.cn/index.php/2023/02/25/react-native-learning-reactjs-component-communication/
来源：APP全栈技术分享
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
海报
React Native学习之ReactJS组件通信
ReactJS组件通信 ReactJS组件关系是嵌套的，因为使用DOM结构，组织结构比较清晰。 因此ReactJS组件包含父组件与子组件 （1）子组件如何调用父组件 this.props……
<<上一篇
下一篇>>
文章目录
关闭
目 录