Что такое поддержка детей в компоненте React и что делают PropTypes?

Я изучаю реакцию на данный момент. Это ссылка с кодом – http://redux.js.org/docs/basics/ExampleTodoList.html

Мне немного сложно понять, что происходит в этой части кода

const Link = ({ active, children, onClick }) => { if (active) { return <span>{children}</span> } return ( <a href="#" onClick={e => { e.preventDefault() onClick() }} > {children} </a> ) } Link.propTypes = { active: PropTypes.bool.isRequired, children: PropTypes.node.isRequired, onClick: PropTypes.func.isRequired } 

Я с трудом понимаю этот фрагмент

 return ( <a href="#" onClick={e => { e.preventDefault() onClick() }} > {children} </a> ) } 

Что означает {дети}? Что оно делает?

И что это делает?

 children: PropTypes.node.isRequired, 

Что подразумевается под узлом в указанной строке?

Когда вы используете пользовательский компонент, например

 <MyComponent>Hello World</MyComponent> 

Все, что вы пишете между тегами (в приведенном выше примере Hello World), передается компоненту в качестве поддержки для children .

Поэтому, когда вы пишете свой компонент как

 const Link = ({ active, children, onClick }) => { 

Вы разрушаете реквизит и становитесь active , children и onClick из реквизита, переданного компоненту

Рассмотрим, например, вы называете компонент Link как

 <Link active="true" onClick={someFunc} style={{color: 'orange'}}>Hello</Link> 

Тогда среди всех реквизитов, то есть active, onClick, style, children , вы будете получать доступ только к active, onClick,children компонентам.

Для вашего второго вопроса:

И что это делает?

Дети: PropTypes.node.isRequired,

Итак, здесь PropTypes – это способ выполнения типа Check на реквизитах, которые передаются компоненту. Он импортируется из пакета react-proptypes .

Так

 children: PropTypes.node.isRequired 

Заставляет children пророк требоваться. Поэтому, если ваш компонент

 <Link /> 

Он не пройдет проверку типа и, следовательно, вам нужно сделать

 <Link>Text</Link> 
 children: PropTypes.node.isRequired, 

Это всего лишь проверка типа реагирующих proptypes. См. https://facebook.github.io/react/docs/typechecking-with-proptypes.html для более подробной информации о том, как работает проверка типов.

В соответствии с примером, это говорит о том, что дети-реквизиты требуются и имеют узел типа. Этот тип node ссылается на все, что может быть отображено. Который затем включается в тег в вашем рендеринге.

  • Отметьте новый элемент onClick в response.js
  • React.js: Идентификация различных входов с помощью одного обработчикаChange
  • This.setState не мутирует состояние сразу
  • React.js Заменить img src onerror
  • Как загрузить и прочитать CSV-файлы в React.js?
  • React + Flux: получение начального состояния в хранилище
  • ReactJS this.state null
  • Разница между этой функцией стрелок ES6 и регулярной функцией?
  • Каковы обратные вызовы в ReactTransitionGroup?
  • Угасать старый элемент, постепенно исчезать
  • Функции вложения в JS
  • Давайте будем гением компьютера.