static rip ng- ont nts -m https oot ner
- 传递export
- default class App extends Component < >{
- constructor() {
- super();
- }
- render() {
- return ( < View style = {
- styles.container
- } > <PropTest name = "呵呵" / ></View>
- );
- }
- }/
- 接收
- export default class PropTest extends Component {
- render() {
- return <Text style={{fontSize: 28, color: ‘red‘}}>姓名:{this.props.name}</Text>
- }
- }
- 子类组件
- export default class PropTest extends Component {
- static defaultProps = {
- name: "小猪"
- }
- render() {
- return <Text style={{fontSize: 28, color: ‘red‘}}>姓名:{this.props.name}</Text>
- }
- }
- 调用者export
- default class App extends Component < >{
- constructor() {
- super();
- }
- render() {
- return ( < View style = {
- styles.container
- } > <PropTest / ></View>
- );
- }
- }/
https://react.bootCSS.com/react/docs/typechecking-with-proptypes.html
- 调用者
- import React, {Component} from ‘react‘;
- import { StyleSheet, View} from ‘react-native‘;
- import PropTest from "./PropTest";
- export default class App extends Component<> {
- constructor() {
- super();
- }
- render() {
- var props = {name: "小米", age: 18, sex: "男"}
- return (
- <View style={styles.container}>
- <PropTest {…props}/>
- </View>
- );
- }
- }
- import React from ‘react‘;
- import {Text, View} from "react-native";
- export default class PropTest extends React.Component {
- render() {
- return (
- <View>
- <Text style={{fontSize: 28, color: ‘red‘}}>姓名:{this.props.name}</Text>
- <Text style={{fontSize: 28, color: ‘red‘}}>年龄:{this.props.age}</Text>
- <Text style={{fontSize: 28, color: ‘red‘}}>年龄:{this.props.sex}</Text>
- </View>
- );
- }
- }
- 调用者
- import React, {Component} from ‘react‘;
- import {StyleSheet, View} from ‘react-native‘;
- import PropTest from "./PropTest";
- export default class App extends Component<> {
- constructor() {
- super();
- }
- render() {
- var props = {name: "小米", age: 18, sex: "男"};
- var {name, sex} = props;
- return (
- <View style={styles.container}>
- <PropTest name={name} sex={sex}/>
- </View>
- );
- }
- }
- import React from ‘react‘;
- import {Text, View} from "react-native";
- export default class PropTest extends React.Component {
- static defaultProps = {
- age: 18
- }
- render() {
- return (
- <View>
- <Text style={{fontSize: 28, color: ‘red‘}}>姓名:{this.props.name}</Text>
- <Text style={{fontSize: 28, color: ‘red‘}}>年龄:{this.props.age}</Text>
- <Text style={{fontSize: 28, color: ‘red‘}}>年龄:{this.props.sex}</Text>
- </View>
- );
- }
- }
React Native的props使用详解
static rip ng- ont nts -m https oot ner
原文:http://www.cnblogs.com/zsjblog/p/7900716.html
来源: http://www.bubuko.com/infodetail-2408378.html