React-Native의 props 사용법에 대한 자세한 설명

이 글은 주로 React-Native에서 props의 상세한 사용법을 소개하고 있습니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 에디터를 따라가서 살펴보겠습니다. Props는 컴포넌트의 특성을 설명하기 위해 존재하는 속성입니다. 상위 구성 요소에서 하위 구성 요소로 전달됩니다.

이전 페이지에서 전달한 props 사용

이전 페이지에서 전달한

새 PropsTest.js 파일 생성

exprot default class PropsTestextendesComponent{
  render(){
    return <Text>{this.props.name}</Text>
  }
}

이전 페이지의 PropsTest 컴포넌트 사용

import PropsTest from './PropsTest'

<PropsTest 
  name = 'XiaoMing'
/>

참고: 위 코드는 모두 코드입니다. 단편.

기본 속성과 그 기능

props 속성은 모두 이전 페이지에서 전달되기 때문에 수정할 수 없습니다. 그러나 PropsTest 파일에서 props에 대한 일부 기본값을 정의할 수 있습니다.

exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}

defaultProps는 정적 수정을 위해 static 키워드를 사용해야 한다는 점에 유의하세요. 이런 방식으로 이전 페이지에서 값이 전달되지 않으면 기본 속성이 표시됩니다.

props 제한 및 확인

exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  static propTypes={
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}

props의 속성 유형을 결정하려면 propTypes를 사용하면 되고, 이를 수정하려면 static 키워드도 사용해야 합니다.

isRequired는 필수 항목을 지정할 수 있습니다.

참고:

propTypes 속성은 반응 패키지에 있으며 사용하기 전에 가져와야 합니다.

props 스트레치 연산자

ES6의 최신 구문

구성 요소에 다음과 같이 많은 속성이 필요한 경우:

params = {name: 'XiaoZhang', age: 18, sex: '男'}

// 如果需要传递给下一个页面需要：
<PropsTest
  name = {params.name}
  sex = {params.sex}
  age = {params.age}
/>
// 等等，这样如果属性特别多，代码将会变得难以维护。

ES6의 최신 스트레치 연산자 기능을 사용할 수 있습니다

<PropsTest
  {...params}
/>

매우 간단합니다.

props 구조 분해 할당

ES6의 최신 구문

확장 연산자를 통해 전달된 개체 중 일부를 다른 구성 요소에서 사용하기 위해 가져오려면 구조 분해 할당을 사용할 수 있습니다

var {name, age} = params;

// 其他地方就可以直接引用name和age了

{name}或{age}

// 这么做的好处，同样是不需要使用如下的传统方式

{params.name}或{params.age}

위 내용은 React-Native의 props 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!