React
반응의 소품
수색…
비고
참고 : React 15.5 이상에서 PropTypes 구성 요소는 자신의 npm 패키지 즉 'prop-types'에 있으며 PropType을 사용할 때 자체 import 문이 필요합니다. 최신 변경 사항에 대한 공식 반응 문서를 참조하십시오. https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html
소개
props
는 부모 구성 요소에서 하위 구성 요소로 데이터와 메서드를 전달하는 데 사용됩니다.
props
에 대한 흥미로운 점
- 그들은 불변이다.
- 그것들은 재사용 가능한 구성 요소를 생성 할 수있게 해줍니다.
기본 예제
class Parent extends React.Component{
doSomething(){
console.log("Parent component");
}
render() {
return <div>
<Child
text="This is the child number 1"
title="Title 1"
onClick={this.doSomething} />
<Child
text="This is the child number 2"
title="Title 2"
onClick={this.doSomething} />
</div>
}
}
class Child extends React.Component{
render() {
return <div>
<h1>{this.props.title}</h1>
<h2>{this.props.text}</h2>
</div>
}
}
위의 예에서 볼 수 있듯이 props
덕분에 재사용 가능한 구성 요소를 만들 수 있습니다.
기본 소품
defaultProps
사용하면 구성 요소 props
기본값 또는 대체 값을 설정할 수 있습니다. defaultProps
는 고정 된 소품이있는 다른 뷰에서 구성 요소를 호출 할 때 유용하지만 일부 뷰에서는 다른 값을 전달해야합니다.
통사론
ES5
var MyClass = React.createClass({
getDefaultProps: function() {
return {
randomObject: {},
...
};
}
}
ES6
class MyClass extends React.Component {...}
MyClass.defaultProps = {
randomObject: {},
...
}
ES7
class MyClass extends React.Component {
static defaultProps = {
randomObject: {},
...
};
}
getDefaultProps()
또는 defaultProps
의 결과는 캐쉬되어 this.props.randomObject
가 친 컴퍼넌트에 의해 지정되어 있지 않은 경우에 값을 가지는 것을 보증하기 위해서 사용됩니다.
PropType
propTypes
사용하면 구성 요소에 필요한 props
과 구성해야 할 props
을 지정할 수 있습니다. 구성 요소는 propTypes
을 설정하지 않아도 작동하지만 구성 요소를 더 읽기 쉽도록 구성하고 구성 요소를 읽는 다른 개발자에게 설명서로 사용되며 개발 중에 React가 시도 할 경우 경고합니다 설정 한 정의와 다른 유형의 소품을 설정하십시오.
일부 기본 propTypes
과 일반적으로 사용할 수있는 propTypes
은 propTypes
과 propTypes
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
optionalSymbol: React.PropTypes.symbol
isRequired
를 propType
연결하면 해당 구성 요소의 인스턴스를 만드는 동안 해당 소품을 제공해야합니다. 필요한 propTypes
을 제공하지 않으면 구성 요소 인스턴스를 만들 수 없습니다.
통사론
ES5
var MyClass = React.createClass({
propTypes: {
randomObject: React.PropTypes.object,
callback: React.PropTypes.func.isRequired,
...
}
}
ES6
class MyClass extends React.Component {...}
MyClass.propTypes = {
randomObject: React.PropTypes.object,
callback: React.PropTypes.func.isRequired,
...
};
ES7
class MyClass extends React.Component {
static propTypes = {
randomObject: React.PropTypes.object,
callback: React.PropTypes.func.isRequired,
...
};
}
더 복잡한 소품 유효성 검사
같은 방식으로 PropTypes
사용하면보다 복잡한 검증을 지정할 수 있습니다
객체 유효성 검사
...
randomObject: React.PropTypes.shape({
id: React.PropTypes.number.isRequired,
text: React.PropTypes.string,
}).isRequired,
...
객체 배열에서 유효성 검사
...
arrayOfObjects: React.PropTypes.arrayOf(React.PropTypes.shape({
id: React.PropTypes.number.isRequired,
text: React.PropTypes.string,
})).isRequired,
...
스프레드 연산자를 사용하여 소품 내려 보내기
대신에
var component = <Component foo={this.props.x} bar={this.props.y} />;
각 속성은 하나의 소품 값으로 전달 될 필요가 어디 확산 연산자 사용할 수 있습니다 ...
모든 값을 전달하는 ES6의 배열을 지원합니다. 구성 요소는 이제 이와 같이 보입니다.
var component = <Component {...props} />;
전달한 객체의 속성은 구성 요소의 소품에 복사된다는 점을 기억하십시오.
순서가 중요합니다. 나중의 속성은 이전의 속성보다 우선합니다.
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
또 다른 경우는 스프레드 연산자를 사용하여 하위 구성 요소에 소품의 일부만 전달할 수 있다는 것입니다. 그런 다음 소품의 소멸 구문을 다시 사용할 수 있습니다.
어린이 구성 요소가 많은 소품을 필요로하지만 하나씩 전달하지 않으려는 경우에 매우 유용합니다.
const { foo, bar, other } = this.props // { foo: 'foo', bar: 'bar', other: 'other' };
var component = <Component {...{foo, bar}} />;
const { foo, bar } = component.props
console.log(foo, bar); // 'foo bar'
소품. 어린이 및 구성 요소 구성
구성 요소의 "하위"구성 요소는 특수 소품 인 props.children
에서 사용할 수 있습니다. 이 소품은 "구성 요소"를 함께 구성하는 데 매우 유용하며 JSX 마크 업을 DOM의 의도 된 최종 구조를보다 직관적으로 반영 할 수 있습니다.
var SomeComponent = function () {
return (
<article className="textBox">
<header>{this.props.heading}</header>
<div className="paragraphs">
{this.props.children}
</div>
</article>
);
}
나중에 컴포넌트를 사용할 때 임의의 수의 하위 요소를 포함 할 수 있습니다.
var ParentComponent = function () {
return (
<SomeComponent heading="Amazing Article Box" >
<p className="first"> Lots of content </p>
<p> Or not </p>
</SomeComponent>
);
}
Props.children은 구성 요소로 조작 할 수도 있습니다. props.children 은 배열 일 수도 있고 아닐 수도 있기 때문에 React는 React.Children 과 같은 유틸리티 함수를 제공합니다. 앞의 예제에서 각 단락을 자체 <section>
요소로 래핑하고 싶다면 다음을 고려하십시오.
var SomeComponent = function () {
return (
<article className="textBox">
<header>{this.props.heading}</header>
<div className="paragraphs">
{React.Children.map(this.props.children, function (child) {
return (
<section className={child.props.className}>
React.cloneElement(child)
</section>
);
})}
</div>
</article>
);
}
Reps.cloneElement를 사용하여 하위 <p>
태그에서 소품을 제거합니다. 소품은 변경할 수 없으므로이 값은 직접 변경할 수 없으므로 유의하십시오. 대신 이러한 소품이없는 클론을 사용해야합니다.
또한 루프에 요소를 추가 할 때 React 가 Re レン 더하는 동안 React가 자식을 조정 하는 방법을 알고 있어야하며 루프에 추가 된 자식 요소에 전역 적으로 고유 한 key
소품을 포함시키는 것이 좋습니다.
Children 구성 요소 유형 감지
자식 구성 요소를 반복 할 때 해당 구성 요소의 유형을 아는 것이 때로는 유용합니다. children 컴포넌트를 통해 반복하기 위해서는 React Children.map
util 함수를 사용할 수 있습니다 :
React.Children.map(this.props.children, (child) => {
if (child.type === MyComponentType) {
...
}
});
child 객체는 특정 구성 요소와 비교할 수있는 type
속성을 노출합니다.