Как обратиться к пропу родителя из прокидываемого в родитель элемента?

Question

Есть два компонента


  function ComponentB(props) {
    return <div>{props.children}</div>;
  }

  function ComponentA() {
    const data = {
      title: "test",
      image: "http://mem/pep.png",
      users: [{ id: 1, name: "kek" }],
    };
    return (
      <ComponentB card={data}>
        // Как тут использовать пропы родителя?
        <header>{this.props.card.title}</header>
      </ComponentB>
    );
  }

ComponentB рендерит children, ComponentA рендерит ComponentB с передачей пропа card, вопрос состоит в том как использовать то что содержится в пропе внутри children элементов ComponentB, т.е. так чтобы header использовал пропсы родительского компонента.

Answer 1

Чтобы получить доступ к пропам родительского компонента внутри children элементов, можно использовать специальную пропсу props.children и передавать ее дальше в качестве пропса. Также можно использовать деструктуризацию пропса внутри дочернего компонента для более удобного доступа к его свойствам.

function ComponentB(props) {
  return <div>{props.children}</div>;
}

function ComponentA() {
  const data = {
    title: "test",
    image: "http://mem/pep.png",
    users: [{ id: 1, name: "kek" }],
  };
  return (
    <ComponentB card={data}>
      {({card}) => ( // Деструктуризация пропса внутри ComponentB
        <header>{card.title}</header>
      )}
    </ComponentB>
  );
}

БЛОГ НА HUSL

Как обратиться к пропу родителя из прокидываемого в родитель элемента?

Ответы (1 шт):