React Native вставляет один компонент в другой

#react-native

#react-native

Вопрос:

Есть ли способ «внедрить» один компонент RN в другой в определенном месте. Скажем, у меня есть этот компонент:

 const Original = () => {
  return (
    <View>
      <Text>Hello</Text>
      {InsertChildComponentHere}
    </View>
  )
}

const ChildComponent = () => {
  return (
    <View>
      <Text>I am a child component</Text>
    </View>
  )
}
 

Комментарии:

1. Я думаю, что более четкое представление о вашей попытке принесет пользу этому вопросу и сообществу. На ваш вопрос, скорее всего, будет получен ответ -> просто поместите <дочерний компонент /> в местоположение

2. Это правда. Я не был достаточно конкретен в отношении моего требования, чтобы он существовал внутри HOC. Я пытался разобраться и просто написать то, что мне абсолютно нужно. И, честно говоря, теперь, когда я вижу сложность выполнения этого внутри HOC, имеет смысл просто импортировать нужный мне компонент везде, где он мне нужен, вместо того, чтобы возиться с добавлением этой функции «импорта». Обрабатывать это внутри HOC (оболочки) будет так же подробно или даже более подробно, чем непосредственно внутри самих различных компонентов.

Ответ №1:

Чтобы внедрить компонент в другой компонент (HOC), ваш компонент должен принимать «Component» в качестве параметров. Вы можете написать это так:

 const Original = (Component) => {
  const newComponent = ({ ...props }) => {
    return (
      <Fragment>
        <Text>Hello</Text>
        <Component {...props} />
      </Fragment>
    );
  };

  return newComponent;
};
 

для создания HOC вы можете написать:

 const MyComponent = withOriginal(ChildComponent);
 

Комментарии:

1. Я пытаюсь внедрить один компонент в другой внутри HOC. Я понимаю, что вы можете просто импортировать компонент внутри другого и разместить его там, где захотите, но это не то, что мне нужно.

2. Я обновил свой ответ, чтобы показать, как вы можете сделать его похожим на HOC.

3. Спасибо. Извините, я должен был быть более ясным с самого начала.