1

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

[{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>
    )

}
7
  • там где template сущность почему вы не хотите там вернуть массив компонент? Я понимаю, что у вас различные шаблоны (template) могут быть, так каждый компонент и можно "переключать" в самом компоненте
    – Dmitry
    9 ноя 2021 в 20:33
  • вы имеете ввиду, перебирать их через switch или if?
    – Diefair
    9 ноя 2021 в 21:03
  • вообще для более сложных вещей можно и useReducer использовать. Для ваших целей я бы взял просто switch и через props прокидывал значение, относительно которого бы работала бы логика. Все зависит от задачи, как всегда
    – Dmitry
    11 ноя 2021 в 14:21
  • Перечитал дополненый вопрос и вошел в ступор. Мои сомнения: в функцию CustomList вы передаете два параметра. Первый - массив, второй - шаблон. Вот этот шаблон (template) что содержит? Ведь то что у вас написано не реально по логике, так как item.value при вызове не существует, и появится только при рендере CustomList
    – Dmitry
    11 ноя 2021 в 14:27
  • github.com/meliorence/react-native-snap-carousel - тут при вызове есть параметр renderItem. вот я точно так же хочу)
    – Diefair
    11 ноя 2021 в 19:27

1 ответ 1

0

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

<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} />)
                 })
........
1
  • спасибо за ответ, я наверно не верно сформировал вопрос. дополнил, посмотрите
    – Diefair
    9 ноя 2021 в 13:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.