Компоненты В Стиле JSX Реагируют На Собственные Компоненты С Детьми

#typescript #react-native

Вопрос:

Я провел некоторые исследования по этому вопросу, но все примеры, которые я нашел, запутанны. Я пытаюсь свести это к самым основным элементам. Я также не нашел примера стиля, который я ищу. Но мне интересно, смогу ли я создавать собственные компоненты React Native с дочерними компонентами в этом стиле:

 function CompositeComponent(): ReactElement {

  return (
    <CustomParentComponent>
      // ✅ I would like to add child elements in the normal XML style.
      <CustomChildComponent />
    </CustomParentComponent>
  );
}

До сих пор это единственный способ, которым я нашел, как создавать дочерние элементы в пользовательских компонентах:

 
function CompositeComponent(): ReactElement {

  return (
    // ❌ I'd like to avoid creating child elements in this style, if possible.
    <CustomParentComponent childComponent={<CustomChildComponent />}>
    </CustomParentComponent>
  );
}

Это делается все время со стандартными собственными компонентами React , такими как View и Text , но я, похоже, не могу найти никаких примеров с пользовательскими компонентами.

Как должно CustomParentComponent выглядеть мое определение, чтобы достичь этого?

Редактировать —

Я пробовал это:

 function CustomParentComponent(child: ReactElement): ReactElement {

  return (
    <CustomParentComponent>
      {child}
    </CustomParentComponent>
  );
}

Но это не работает, когда я пытаюсь добавить CustomChildComponent в стиле JSX/XML:

 function CompositeComponent(): ReactElement {

  return (
    <CustomParentComponent>
      // ❌Error❌ Type '{ children: Element; }' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>': type, props, keyts(2739)
      <CustomChildComponent />
    </CustomParentComponent>
  );
}

1. Что тебя смущает? Вам просто нужно передать детей, как вы это сделали в первом фрагменте кода. В вашем CustomParentComponent , вы получите его внутри реквизита для ваших детей children . легко визуализируйте реквизит . CustomParentComponent

2. Я отредактирую свой ответ с учетом того, что я пробовал. Я надеялся оставить его более открытым, потому что не хотел слишком увлекаться конкретной ошибкой, а, скорее, продолжить обсуждение определения для CustomParentComponent .

Ответ №1:

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

Например, рассмотрим приведенный ниже код,

 const CustomParentComponent = (props) => (
  <View>
    {props.children}
  </View>
);

Теперь вы можете передавать компоненты своих детей своим CustomParentComponent родителям

 <CustomParentComponent>
  <CustomChildComponent />
</CustomParentComponent>

Помните children , что это скорее реквизит по умолчанию React . Вы можете убедиться в этом, просто распечатав виртуальное дерево dom.