freeCodeCamp/guide/russian/certifications/front-end-libraries/react/pass-state-as-props-to-chil.../index.md

1.8 KiB
Raw Blame History

title localeTitle
Pass State as Props to Child Components Состояние передачи в качестве компонентов реквизита для детей

Состояние передачи в качестве компонентов реквизита для детей

В этой задаче мы собираемся передать состояние, но поскольку состояние является локальным для его родительского компонента, мы должны использовать реквизит для перехода к дочернему компоненту. Использование реквизита в дочерних компонентах позволит нам хранить все данные состояния в родительском компоненте, и мы можем передавать данные в одном направлении к дочерним компонентам.

class MyApp extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      name: 'CamperBot' 
    } 
  } 
  render() { 
    return ( 
       <div> 
         // Here we will call this.state.name in order to pass the value of CamperBot 
         // to the NavBar component 
         <Navbar name={this.state.name} /> 
       </div> 
    ); 
  } 
 }; 
 
 class Navbar extends React.Component { 
  constructor(props) { 
    super(props); 
  } 
  render() { 
    return ( 
    <div> 
      // Since we passed in the CamperBot state value into the the NavBar component above 
      // the h1 element below will render the value passed from state 
      <h1>Hello, my name is: {this.props.name}</h1> 
    </div> 
    ); 
  } 
 };