将不同的数组映射到同一个组件中

Question

使用react，我需要将props数据传递给组件，唯一的问题是这些数据来自两个不同的数组。

如何通过仅创建一个组件来传递它？

如果我这样做，映射两个数组，我得到两个组件，它必须只有一个：

const Field2 = (props) => {

    return (

        <div className={"field2"}>

            {props.thumbnails.map(a =>
                <Field2Content label={a.label}
                />
            )}

            {props.texturasEscolhidas.map(b =>
                <Field2Content name={b.name}
                />
            )}

        </div>
    )
};

export default Field2;

如果我这样做：

    {props.thumbnails.map(a =>
        <Field2Content label={a.label}
                       name={'hello'}
        />
    )}

我明白了：

你好＆＃39;是我需要从texturasEscolhidas数组获得的。

＆＃34;腿的颜色＆＃34;和＆＃34;颜色＆＃34;在组件是渲染器时创建，Hello只应在单击按钮时显示，并且它是动态的，按下按钮更改。

Answer 1

要仅使用一个组件，假设两个数组的长度相同，则可以通过迭代一个数组并通过索引访问另一个数组的元素来获取label和name（ map）回调中的第二个参数：

const Field2 = (props) => {
    return (
        <div className={"field2"}>
            {props.thumbnails.map((a, index) =>
                <Field2Content
                   label={a.label}
                   name={(props.texturasEscolhidas[index] || {}).name}
                />
            )}
        </div>
    )
};