Детская опора в компоненте React

Question

Я учусь реагировать на данный момент. это ссылка с кодом - 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,

что подразумевается под узлом в приведенной выше строке?

Answer 1

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

<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 способ выполнения проверки типа для реквизитов, которые передаются компоненту. Это импортируется из react-proptypes пакет.

Так

children: PropTypes.node.isRequired

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

<Link />

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

<Link>Text</Link>

Answer 2

children: PropTypes.node.isRequired,

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

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

Answer 3

Если вам важны типы ваших опор, вам нужно использовать React.PropsWithChildren, например

type Props = React.PropsWithChildren<{
  name: string; // strongly typed!
  myProp: string;
}>;

export function MyComponent({ name, myProp, children }: Props) {
  return (
    <>
      <div>{name}</div>
      <div>{myProp}</div>
      {children != null && children}
    </>
  )
}