ReactJS\u7ec4\u4ef6\u5173\u7cfb\u662f\u5d4c\u5957\u7684\uff0c\u56e0\u4e3a\u4f7f\u7528DOM\u7ed3\u6784\uff0c\u7ec4\u7ec7\u7ed3\u6784\u6bd4\u8f83\u6e05\u6670\u3002<\/p>\n
\u56e0\u6b64ReactJS\u7ec4\u4ef6\u5305\u542b\u7236\u7ec4\u4ef6\u4e0e\u5b50\u7ec4\u4ef6<\/p>\n
<\/p>\n
\uff081\uff09\u5b50\u7ec4\u4ef6\u5982\u4f55\u8c03\u7528\u7236\u7ec4\u4ef6<\/p>\n
this.props<\/p>\n
\uff082\uff09\u7236\u7ec4\u4ef6\u5982\u4f55\u8c03\u7528\u5b50\u7ec4\u4ef6<\/p>\n
\u9996\u5148\u4f7f\u7528\u5c5e\u6027ref\u4e3a\u5b50\u7ec4\u4ef6\u53d6\u4e2a\u540d\u5b57<\/p>\n
this.refs.\u540d\u5b57.getDOMNode()<\/p>\n
<!DOCTYPE html>\n<html>\n<head lang="en">\n <meta charset="UTF-8">\n <title>React\u7ec4\u4ef6\u901a\u4fe1<\/title>\n <script type="text\/javascript" src="react.js"><\/script>\n <script type="text\/javascript" src="react-dom.js"><\/script>\n <script type="text\/javascript" src="browser.min.js"><\/script>\n<\/head>\n<body>\n<div id="example"><\/div>\n<script type="text\/babel">\n var Parent = React.createClass({\n click:function(){\n \/\/\u7236\u7ec4\u4ef6\u8c03\u7528\u5b50\u7ec4\u4ef6\n this.refs.child.getDOMNode().style.color="red";\n },\n\n render:function(){\n return (\n <div onClick={this.click} >Parent is :\n \/\/\u5b50\u7ec4\u4ef6\u8c03\u7528\u7236\u7ec4\u4ef6\n <Child name={this.props.name} ref="child"><\/Child>\n <\/div>\n );\n }\n });\n\n var Child = React.createClass({\n render:function(){\n return <span> {this.props.name} <\/span>;\n }\n });\n\n ReactDOM.render(<Parent name="React\u8bed\u6cd5\u57fa\u7840" \/>, document.getElementById('example'));\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\nJSX\u5b9e\u6218<\/h2>\n
React Native\u4e2d\u6ca1\u6709DOM\u7684\u6982\u5ff5\uff0c\u53ea\u6709\u7ec4\u4ef6\u7684\u6982\u5ff5\uff0c\u6240\u4ee5\u6211\u4eec\u5728ReactJS\u4e2d\u4f7f\u7528\u7684Html\u6807\u7b7e\u4ee5\u53ca\u5bf9DOM\u7684\u64cd\u4f5c\u662f\u4e0d\u8d77\u4f5c\u7528\u7684\uff0c\u4f46\u662f\u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\u3001JSX\u7684\u8bed\u6cd5\u3001\u4e8b\u4ef6\u7ed1\u5b9a\u3001\u81ea\u5b9a\u4e49\u5c5e\u6027\u7b49\uff0c\u5728React Native\u548cReactJS\u4e2d\u662f\u4e00\u81f4\u7684\u3002<\/p>\n
React Native\u7684ReactJs\u5199\u6cd5<\/h3>\n\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n'use strict';\nimport React, {\n AppRegistry,\n Component,\n StyleSheet,\n Text,\n View\n} from 'react-native';\n\nclass Box extends Component {\n render(){\n return (\n <View style={[BoxStyles.box,BoxStyles[this.props.width],BoxStyles[this.props.height]]}>\n <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>top<\/Text><\/View>\n <View style={[BoxStyles[this.props.childName]]}>\n <View style={[BoxStyles.left,BoxStyles[this.props.classBg]]}><Text>left<\/Text><\/View>\n {this.props.children}\n <View style={[BoxStyles.right,BoxStyles[this.props.classBg]]}><Text>right<\/Text><\/View>\n <\/View>\n <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>bottom<\/Text><\/View>\n <View style={[BoxStyles.label]}><Text>{this.props.boxName}<\/Text><\/View>\n <\/View>\n )}\n}\n\nclass MargginBox extends Component{\n render(){\n return (\n <View style={[BoxStyles.margginBox]}>\n <Box childName="borderBox" height="height400" width="width400" boxName="margin" classBg="bgred">{this.props.children}<\/Box>\n <\/View>\n )}\n}\n\nclass BorderBox extends Component{\n render(){\n return (\n <Box childName="paddingBox" height="height300" width="width300" boxName="border" classBg="bggreen" >{this.props.children}<\/Box>\n )}\n}\n\nclass PaddingBox extends Component{\n render(){\n return (\n <Box childName="elementBox" height="height200" width="width200" boxName="padding" classBg="bgyellow" >{this.props.children}<\/Box>\n )}\n}\n\nclass ElementBox extends Component{\n render(){\n return (\n <View style={[BoxStyles.box,BoxStyles.height100]}>\n <View style={[BoxStyles.measureBox]}>\n <View style={[BoxStyles.right]}><Text>height<\/Text><\/View>\n <\/View>\n <View style={[BoxStyles.bottom,BoxStyles.height50]} ><Text>width<\/Text><\/View>\n <View style={[BoxStyles.label]}><Text>element<\/Text><\/View>\n <View style={[BoxStyles.widthdashed]}><\/View>\n <View style={[BoxStyles.heightdashed]}><\/View>\n <\/View>\n )}\n}\n\nclass AppBlog extends Component {\n render(){\n return (\n <MargginBox>\n <BorderBox>\n <PaddingBox>\n <ElementBox>\n <\/ElementBox>\n <\/PaddingBox>\n <\/BorderBox>\n <\/MargginBox>\n )}\n}\n\nconst BoxStyles = StyleSheet.create({\n height50:{\n height: 50,\n },\n height400:{\n height: 400,\n },\n height300:{\n height: 300,\n },\n height200:{\n height: 200,\n },\n height100:{\n height: 100,\n },\n width400:{\n width: 400,\n },\n width300:{\n width: 300,\n },\n width200:{\n width: 200,\n },\n width100:{\n width: 100,\n },\n bgred: {\n backgroundColor:'#6AC5AC',\n },\n bggreen: {\n backgroundColor: '#414142',\n },\n bgyellow: {\n backgroundColor: '#D64078',\n },\n box: {\n flexDirection: 'column',\n flex: 1,\n position: 'relative',\n },\n label: {\n top: 0,\n left: 0,\n paddingTop: 0,\n paddingRight: 3,\n paddingBottom: 3,\n paddingLeft: 0,\n position: 'absolute',\n backgroundColor: '#FDC72F',\n },\n top: {\n justifyContent: 'center',\n alignItems: 'center',\n },\n bottom: {\n justifyContent: 'center',\n alignItems: 'center',\n },\n right: {\n width: 50,\n justifyContent: 'space-around',\n alignItems: 'center',\n },\n left: {\n width: 50,\n justifyContent: 'space-around',\n alignItems: 'center',\n },\n heightdashed: {\n bottom: 0,\n top: 0,\n right: 20,\n borderLeftWidth: 1,\n position: 'absolute',\n borderLeftColor: '#FDC72F',\n },\n widthdashed: {\n bottom: 25,\n left: 0,\n right: 0,\n borderTopWidth: 1,\n position: 'absolute',\n borderTopColor: '#FDC72F',\n },\n yellow: {\n color: '#FDC72F',\n fontWeight:'900',\n },\n white: {\n color: 'white',\n fontWeight:'900',\n },\n margginBox:{\n position: 'absolute',\n top: 100,\n paddingLeft:7,\n paddingRight:7,\n },\n borderBox:{\n flex: 1,\n justifyContent: 'space-between',\n flexDirection: 'row',\n },\n paddingBox:{\n flex: 1,\n justifyContent: 'space-between',\n flexDirection: 'row',\n },\n elementBox:{\n flex: 1,\n justifyContent: 'space-between',\n flexDirection: 'row',\n },\n measureBox:{\n flex: 1,\n flexDirection: 'row',\n justifyContent: 'flex-end',\n alignItems:'flex-end',\n },\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n },\n welcome: {\n fontSize: 20,\n textAlign: 'center',\n margin: 10,\n },\n instructions: {\n textAlign: 'center',\n color: '#333333',\n marginBottom: 5,\n },\n});\n\nAppRegistry.registerComponent('AppBlog', () => AppBlog);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"ReactJS\u7ec4\u4ef6\u901a\u4fe1 ReactJS\u7ec4\u4ef6\u5173\u7cfb\u662f\u5d4c\u5957\u7684\uff0c\u56e0\u4e3a\u4f7f\u7528DOM\u7ed3\u6784\uff0c\u7ec4\u7ec7\u7ed3\u6784\u6bd4\u8f83\u6e05\u6670\u3002 \u56e0\u6b64React […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[162],"class_list":["post-482","post","type-post","status-publish","format-standard","hentry","category-react-native","tag-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=482"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/482\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}