68 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
		
		
			
		
	
	
			68 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| 
								 | 
							
								---
							 | 
						|||
| 
								 | 
							
								title: Props
							 | 
						|||
| 
								 | 
							
								localeTitle: Реквизит
							 | 
						|||
| 
								 | 
							
								---
							 | 
						|||
| 
								 | 
							
								## Реагировать на коренных жителей - реквизит
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								Термин «реквизит», сокращенный для «свойств», означает некоторый тип данных, передаваемых из одного компонента в другой. Реквизит всегда течет вниз от родительского компонента к ребенку.
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								В React дочерний компонент имеет доступ к информации от родителя через реквизит:
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								```jsx
							 | 
						|||
| 
								 | 
							
								// the child Header component receives the text prop and can access it via this.props.text 
							 | 
						|||
| 
								 | 
							
								 class Header extends Component { 
							 | 
						|||
| 
								 | 
							
								  render () { 
							 | 
						|||
| 
								 | 
							
								    return ( 
							 | 
						|||
| 
								 | 
							
								      <Text>{this.props.text}</Text> 
							 | 
						|||
| 
								 | 
							
								    ) 
							 | 
						|||
| 
								 | 
							
								  } 
							 | 
						|||
| 
								 | 
							
								 } 
							 | 
						|||
| 
								 | 
							
								 
							 | 
						|||
| 
								 | 
							
								 class App extends Component { 
							 | 
						|||
| 
								 | 
							
								  render () { 
							 | 
						|||
| 
								 | 
							
								    return ( 
							 | 
						|||
| 
								 | 
							
								      <Header text="Welcome!" /> 
							 | 
						|||
| 
								 | 
							
								    ); 
							 | 
						|||
| 
								 | 
							
								  } 
							 | 
						|||
| 
								 | 
							
								 } 
							 | 
						|||
| 
								 | 
							
								```
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								Это также работает в функциональных компонентах:
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								```jsx
							 | 
						|||
| 
								 | 
							
								// in functional components, props will be received as a parameter 'props' 
							 | 
						|||
| 
								 | 
							
								 const Header = (props) => { 
							 | 
						|||
| 
								 | 
							
								  return ( 
							 | 
						|||
| 
								 | 
							
								    <Text>{props.title}</Text> 
							 | 
						|||
| 
								 | 
							
								  ); 
							 | 
						|||
| 
								 | 
							
								 }; 
							 | 
						|||
| 
								 | 
							
								 
							 | 
						|||
| 
								 | 
							
								 class App extends Component { 
							 | 
						|||
| 
								 | 
							
								  render () { 
							 | 
						|||
| 
								 | 
							
								    return ( 
							 | 
						|||
| 
								 | 
							
								      <View> 
							 | 
						|||
| 
								 | 
							
								    <Header text="Welcome!" /> 
							 | 
						|||
| 
								 | 
							
								      </View> 
							 | 
						|||
| 
								 | 
							
								    ); 
							 | 
						|||
| 
								 | 
							
								  } 
							 | 
						|||
| 
								 | 
							
								 } 
							 | 
						|||
| 
								 | 
							
								```
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								Другие импортируемые библиотеки также дадут вам доступ к дополнительным свойствам внутри ваших компонентов. Вот пример из библиотеки [реагирующих на-элементов](https://github.com/react-native-training/react-native-elements) .
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								```jsx
							 | 
						|||
| 
								 | 
							
								import { Button } from 'react-native-elements'; 
							 | 
						|||
| 
								 | 
							
								 
							 | 
						|||
| 
								 | 
							
								 // here 'buttonStyle' and 'title' are props passed into the Button component 
							 | 
						|||
| 
								 | 
							
								 class App extends Component { 
							 | 
						|||
| 
								 | 
							
								  render () { 
							 | 
						|||
| 
								 | 
							
								    return ( 
							 | 
						|||
| 
								 | 
							
								      <Button 
							 | 
						|||
| 
								 | 
							
								    buttonStyle={{backgroundColor: 'red', borderRadius: 10}} 
							 | 
						|||
| 
								 | 
							
								    title={`Submit`} 
							 | 
						|||
| 
								 | 
							
								      /> 
							 | 
						|||
| 
								 | 
							
								    ); 
							 | 
						|||
| 
								 | 
							
								  } 
							 | 
						|||
| 
								 | 
							
								 } 
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								```
							 |