Что такое поддержка детей в компоненте 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