ReactNative: как передать компонент для отрисовки?

Question

Стоит такая задача: передать компонент в компонент, что бы вывести его с нужными параметрами в цикле. Подробнее: есть массив данных

[{id: 1, value: 'Apple'}, {id: 2, value: 'Orange'}, {id: 3, 'Chery'}]

Есть неким компонент, который делает отрисовку полученного массива:

const CustomList = ({arr}) => {
    return (
        <View>
            {
                 arr.map(item => {
                     return (<View><Text>{item.value}</Text></View>)
                 })
            }
        </View>
    )

}

Структура массива будет одна и та же, а вот вид может меняться. Поэтому решил сделать, что бы вот эта часть

return (<View><Text>{item.value}</Text></View>)

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

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

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

<CustomList arr=[] template=<View><Text>{item.value}</Text></View>>

А сам компонент переписать так

const CustomList = ({arr, template}) => {
    return (
        <View>
            {
                 arr.map(item => {
                     return template // вот как тут подставить данные?
                 })
            }
        </View>
    )

}

Answer 1

Думаю, что правильней всего это создать отдельный компонент под вот эту директиву

<View><Text>{item.value}</Text></View>

то есть

const NeedsComponent = (props) => {
 // в действительности здесь можно все что угодно прописывать, и том числе 
 // и манипуляциии с props, state, функции
  return(
    <View><Text>{props.value}</Text></View>
  )
}

И далее формировать список элементов, основываясь на компонентах NeedsComponent

........
                 arr.map(item => {
                     return (<NeedsComponent value={item.value} />)
                 })
........

БЛОГ НА HUSL

ReactNative: как передать компонент для отрисовки?

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