提问人：viko randazo 提问时间：10/31/2023 更新时间：10/31/2023 访问量：16
在 React 中的一系列映射输入组件中插入自定义选择元素
Inserting a custom select element within a series of mapped input components in React
问：
我正在做一个 ReactJS 项目，其中我有一个对象数组。每个对象都包含我构建的自定义输入组件 （<Input key={} type={} title={} group={}/>） 的道具数据。我的典型方法是映射到这个数组上，以呈现这些输入组件中的每一个。
但是，我对渲染的元素序列有特定的要求。
例如，如果我需要渲染的组件遵循以下顺序：
// start mapping the array and render <Input /> components
// --------------------------------------------------------------
<Input key={} type={} title={} group={}/>
<Input key={} type={} title={} group={}/>
// here i want to insert the Select Element in between the map sequence
// --------------------------------------------------------------
<Select isActive={} options={} onChangeAction={} optionEvent={}/>
// continue the <Input /> components map sequence
// --------------------------------------------------------------
<Input key={} type={} title={} group={}/>
<Input key={} type={} title={} group={}/>
<Input key={} type={} title={} group={}/>
如您所见，我想在映射的 <Input /> 组件之间插入一个自定义选择元素 （<Select />）。我试图在不大量操作原始数组或降低代码的可读性和可维护性的情况下实现这一目标。
React 中是否有一种传统或推荐的方法来映射数组，同时保持渲染组件的特定顺序，尤其是在序列中插入不同的组件时？
任何关于这一点的见解或最佳实践都将是无价的......
我将一个组键值对合并到包含道具数据的数组中。此组键通过 reducer 进行处理，然后 reducer 将特定的 className 分配给每个渲染组件的 div 包装器。
但是，我发现这种方法不太直观且难以维护。虽然我可以采用这种类型的操作或迭代多个数组来映射每个组（每个数组代表一个不同的组），但感觉很麻烦。这种方法需要过多的打字，这似乎是多余且效率低下的。
答：
0赞
Gabriele Petrioli
10/31/2023
#1
有几个选项（不是真正的最佳实践，因为这些选项取决于具体方案）是
a） 您可以将数组拆分为多个数组，然后映射到这些数组上（如果它对您的用例有意义）
const allObjects = [...];
const preSelect = allObjects.slice(0,5);
const postSelect = allObjects.slice(5);
// and when rendering do
preSelect.map(...)
<Select .../>
postSelect.map(...)
b） 或者，如果您对在何处/何时显示选择有特定的逻辑，则可以在此时返回带有 and 的 a。FragmentSelectInput
allObjects.map((object, index) => {
if (/* condition to show select */){
return <React.Fragment><Select .../><Input .../></React.Fragment>
}
return <Input .../>
})
最佳做法是，只需遍历数组，即可在正确的位置正确包含输出所需的数据。Select
类似的东西
const allObjects = [
...,
{type:'select', ...},
...
];
// and then do
allObject.map( object => {
if (object.type === 'select'){
return <Select .../>;
}
return <Input .../>;
})
评论
0赞
viko randazo
10/31/2023
正如你所建议的，我已将所需的元素添加到数组中，并以与之前相同的方式对其进行映射。如果此方法被认为是此类方案的最佳做法，我将继续使用它。但是，我想确保没有更优化的解决方案。
上一个：如何透视数据帧？
评论