我有一个关于解决这个问题的最佳方法的问题。 所以我有一个名为<Banner/>的无状态组件,它只显示一个图像和一些文本。

然后我有一个对象数组,它们在我的网站主页上生成一个功能列表。 这个listGroups数组中大约有 15 个对象,因此它一个接一个地呈现 15 个<Group/>组件。 代码如下

  {listGroups.map((group, i) => (group?.assets?.length > 0) && (
     <Group key={group.id} {...group} showTitle={i !== 0} large={i === 0} />
  ))}

我想将我的<Banner/>组件插入到此列表中的特定位置,最好是在呈现第一个<Group/> 我可以使用array.splice并将组件添加到数组中的特定位置,但它没有呈现在页面上,所以我显然在这里遗漏了一些东西。

最终结果将是这样的

<Group/>
<Banner/>
<Group/>
<Group/>
<Group/>
and so on

任何帮助,将不胜感激。

#1楼 票数:2

您可以创建一个 JSX.Elements 数组,例如

const arr: JSX.Elements[] = [];

listGroups.forEach((group, i) => {
  if(i == 1) arr.push(<Banner/>);
  // add your Groups
})

你可以渲染arr

#2楼 票数:1

您有多种方法可以实现这一目标。

在 React 中,您可以在 JSX 中渲染元素数组,就像任何其他变量一样。 如果您希望基于来自 api 的一些数据呈现组件,您也可以映射您的数据并将数据传递给组件。 在这两种情况下都需要“key”属性,以便 React 知道结构何时发生变化。

CodeSandbox 上的实时示例https://codesandbox.io/s/bold-grass-p90q9

const List = [
  <MyComponent key="one" text="im 1st!" />,
  <MyComponent key="two" text="im 2nd" />,
  <MyComponent key="three" text="im 3rd" />
];

const data = [
  { text: "1st string" },
  { text: "2st string" },
  { text: "3st string" }
];

export default function App() {
  return (
    <div className="App">
      <h3>Render array</h3>
      {List}
      <h3>Map from data</h3>
      {data.map(({ text }) => (
        <MyComponent key={text} text={text} />
      ))}
    </div>
  );
}

#3楼 票数:1

检查这个,让我知道这是否是你想要的

沙盒

https://codesandbox.io/s/crazy-lalande-mx5oz

//Have taken limit as 10 for demo
export default function App() {
  function print() {
    let group = [];
    for (let i = 0; i <= 10; i++) {
      group.push(<Group key={i} />);
    }
    group.splice(1, 0, <Banner/>);// adding Banner at 1st index
    return group;
  }
  return <div>{print()}</div>;
}

  ask by ramageftw translate from so

未解决问题?本站智能推荐:

1回复

React 中的组件类型(总共)? [关闭]

关闭。 这个问题需要更加集中。 它目前不接受答案。 想改善
2回复

警告:组件正在将文本类型的受控输入更改为不受控制。 (React.js)

我有以下组件,我在输入中将用户的现有详细信息显示为值,用户应该能够更改这些详细信息并单击保存。 但问题是它在控制台中显示以下错误: 下面是组件代码: 出了什么问题,如何解决? 我需要让查看现有值,然后更改他们想要的任何内容。
2回复

是否可以将组件放入组件中?

我制作了一个想要重用的Form组件,我还制作了一个我想要重用的Submit组件。 是否可以将Submit组件放在Form组件中? 提交.js 测验.js
3回复

如何在第一个反应组件中添加图像并使用 map 函数在其余组件中忽略

我正在尝试使用 json 文件将内容添加到组件中,我只需要第一个组件具有封面图像,其余组件忽略它。 下面的代码根据需要呈现,但它还将空白图像添加到除第一个之外的组件中。
1回复

无法从其父 React JS 获取子组件引用对象

我想从子组件到父组件引用<div>和<span>组件。 所以我编码如下: 在孩子里面我得到了类似的东西: 我想获取这些标签的属性。 诸如 getBoundingClientRect()、scrollTop 等; 但是来自 Parent 组件,因为我无法从 ChildC
2回复

从数组映射时,React 子组件不会重新渲染

我正在根据用户输入按需加载一些反应组件(以及其他信息)。 要渲染的组件保存在一个数组中,render 方法使用array.map来包含组件。 问题是,如果我触发主应用程序组件的forceUpdate() ,映射的组件将不会更新。 代码示例: https : //codesandbox.io/s/
4回复

在 React 中使用索引渲染数组元素

我正在尝试在网站上构建一种不同组件的幻灯片。 我已将所需的幻灯片作为单个元素导入并将它们存储在数组中。 我已经编写了基本结构,但不知道如何使用索引呈现存储在数组中的组件。 但这不起作用。 有没有人有正确或更好的方法来做到这一点?
1回复

如何使用包含一些组件名称的数组来呈现那些预定义的组件

好的,所以我有这个问题并不像听起来那么简单。 我正在设计一个网络项目,我可以在其中添加我的文章。 现在的问题是,一篇文章将是一个大页面,需要大量的格式和其他事情。 因此,我想为我写的每一篇文章添加一个组件。 例如,假设它的 ArticleX.js 同样假设像这样我也有很多其他文章。 比方说,还