react-native
소품

소개

소도구는 무엇입니까?

소품은 부모 구성 요소에서 하위 구성 요소로 데이터를 전송하는 데 사용됩니다. 소품은 읽기 전용입니다. 하위 구성 요소는 this.props.keyName을 사용하여 상위에서 전달 된 소품 만 가져올 수 있습니다. 소품을 사용하면 구성 요소를 재사용 할 수 있습니다.

소품의 사용

설치가 완료되면. 아래 코드를 index.android.js 또는 index.ios.js 파일에 복사하여 소품을 사용하십시오.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

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

소품을 사용하면 구성 요소를 포괄적으로 만들 수 있습니다. 예를 들어 Button 구성 요소가 있습니다. 해당 구성 요소에 다른 소품을 전달할 수 있으므로 해당 단추를 자신의보기에 배치 할 수 있습니다.

_{출처 : 소품 - 반응 원주민}

PropType

prop-types 패키지를 사용하면 런타임 유형 검사를 구성 요소에 추가하여 구성 요소로 전달 된 소품 유형이 올바른지 확인할 수 있습니다. 예를 들어, name 이나 isYummy 소품을 아래의 구성 요소에 전달하지 않으면 개발 모드에서 오류가 발생합니다. 프로덕션 모드에서는 소품 유형 검사가 수행되지 않습니다. propTypes 을 정의하면 구성 요소를보다 읽기 쉽고 유지 보수 할 수 있습니다.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { AppRegistry, Text, View } from 'react-native';

import styles from './styles.js';

class Recipe extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    isYummy: PropTypes.bool.isRequired
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.props.name}</Text>
        {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
      </View>
    )
  }
}

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


// Using the component
<Recipe name="Pancakes" isYummy={true} />

다중 PropTypes

하나의 소품에 대해 여러 propTypes 을 사용할 수도 있습니다. 예를 들어, 내가 사용하고있는 이름 소품도 객체가 될 수 있습니다. 나는 그것을 쓸 수 있습니다.

static propTypes = {
  name: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
  ])
}

어린이 소품

또한라는 특별한 소품이 children 와 같은 전달되지 않으며,

<Recipe children={something}/>

대신이 작업을 수행해야합니다.

<Recipe>
  <Text>Hello React Native</Text>
</Recipe>

레서피의 렌더링에서 이것을 할 수 있습니다 :

return (
  <View style={styles.container}>
    {this.props.children}
    {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
  </View>
)

Recipe 에 <Text> 구성 요소가 있습니다.이 구성 요소에는 Hello React Native .

그리고 아이들의 propype은

children: PropTypes.node

기본 소품

defaultProps를 사용하면 구성 요소의 기본 소도 값을 설정할 수 있습니다. 아래 예제에서 이름 props를 전달하지 않으면 John이 표시되고 그렇지 않으면 전달 된 값이 표시됩니다.

class Example extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.name}</Text>
      </View>
    )
  }
}


Example.defaultProps = {
  name: 'John'
}