Reactjs 将读取字符串作为组件进行反应

我使用bootstrap框架呈现一个简单的3列网格布局，其中包含页面上的一些内容。当它变得复杂时，我试图根据循环中的位置有条件地呈现引导

或

——例如，如果

索引%3==0

呈现

，如果

（索引+1）%3==0呈现
。因为map中的条件渲染存在问题，所以我提出了以下方法，如果有一种方法可以将字符串作为React组件来读取，则该方法将有效。有人知道怎么做吗

const网站数据=[
{
名称：“abcdefg”，
url:“https://www.abcedfg.com/",
类别：[“反应”]，
缩略图：需要（“./assets/images/image.png”），
},
{
名称：“RRRR”，
url:“https://www.rrrrrr.com/",
类别：[“wordpress”]，
缩略图：需要（“./assets/images/rrrrrrr.png”），
},
{
名称：“jjjjjjjj”，
url:“https://www.jjjjjjjj.com/",
类别：[“wordpress”]，
缩略图：需要（“./assets/images/jjj.png”），
},
{
名称：“ffffff”，
url:“https://www.ffffff.com/",
类别：[“wordpress”]，
缩略图：需要（“./assets/images/ffffff.png”），
},
{
名称：“dddddd”，
url:“https://www.dddddd.com/",
类别：[“wordpress”]，
缩略图：需要（“./assets/images/dddddd.png”），
},
{
名称：“adadads”，
url:“https://www.adadads.com/",
类别：[“wordpress”]，
缩略图：需要（“./assets/images/adadads.png”），
},
];
const RowOpen=（道具）=>{
常量{index}=props；
如果（索引%3==0）{
返回“”；
}否则{
返回；
}
};
常量行关闭=（道具）=>{
常量{index}=props；
如果（索引+（1%3）==0）{
返回“”；
}否则{
返回；
}
};
const网站=（）=>{
返回websiteData.map（（站点，索引）=>{
返回(
);
});
};

最后，我想循环浏览
websiteData
，最终得到如下结果：


...
...
...
您有
…
，然后这些被定义为返回
“
和
”
。明确地说，这些是字符串，将显示为纯文本，而不是组件。您不能在ReactJS中定义这样的组件。你必须这样定义它们

var component = <Row />;

然后您只需要最后的行/跨度显示功能

  const RowDisplayRow = (site, index) => {
    return (
            <Row index={index}>
            <Col md="4">
              <a>
                <img style={{ maxWidth: '100%' }} src={site.thumbnail} />
              </a>
            </Col>
            </Row index={index}>
    );
  }
  
  const RowDisplaySpan = (site, index) => {
    return (
            <Row index={index}>
            <Col md="4">
              <a>
                <img style={{ maxWidth: '100%' }} src={site.thumbnail} />
              </a>
            </Col>
            </Row index={index}>
    );
  }

const RowDisplayRow=（站点，索引）=>{
返回(
);
}
const RowDisplaySpan=（站点、索引）=>{
返回(
);
}

我已经在sudo代码中完成了这一切，但是，我认为您可能会明白我试图演示的想法。解释有时比代码更重要
 您只需将条件像

   return (
      websiteData.map((site, index) => {
        return (
          <React.Fragment>
            {index % 3 == 0 ? <Row /> : <span />}
            <Col md="4">
              <a>
                <img style={{ maxWidth: '100%' }} src={site.thumbnail} />
              </a>
            </Col>
           {index + 1 % 3 == 0 ? </Row> : <span /> }
          </React.Fragment>
        )
      })
    )



返回(
websiteData.map（（站点、索引）=>{
返回(
{索引%3==0？：}
{索引+1%3==0？：}
)
})
)

试试这个你会得到你想要的输出！这会有帮助的
简单且最佳的方法！：）
 你真正想做什么？你没有得到你想要的解决方案吗？为什么没有像
const RowDisplay=props=>{return（{rowinfo}）；}
？@Muzamilijaz请参阅编辑，我在编辑中明确了最终所需的结果谢谢，这里的问题是每个内部需要3个。@DLateef：当然，这部分
if（索引+1%3==0）{
仍然在代码中。但是如果您只需要
，为什么不这样编码呢？我发布的主要原因是在标题“将字符串作为组件读取”中解释问题我试图做出一个未来的答案。开发的需求总是在不断发展和变化，这是可以理解的！但我的回答是否帮助您理解react字符串与组件？这是我的主要希望！谢谢，我非常感谢。我理解react字符串与组件之间的区别。我希望有某种方式来阅读s字符串作为组件名称，例如，与
eval（）相同
可以用来读取字符串作为变量。不管怎样，我现在知道你是如何处理迭代的了，我将尝试让你知道！这不会起作用，不幸的是，不能有一个自动关闭。react也不允许使用相应的开始标记单独呈现一个条件。呈现
意味着什么？原因是什么ct不允许在单独的条件中使用开始和结束标记
  const RowDisplayRow = (site, index) => {
    return (
            <Row index={index}>
            <Col md="4">
              <a>
                <img style={{ maxWidth: '100%' }} src={site.thumbnail} />
              </a>
            </Col>
            </Row index={index}>
    );
  }
  
  const RowDisplaySpan = (site, index) => {
    return (
            <Row index={index}>
            <Col md="4">
              <a>
                <img style={{ maxWidth: '100%' }} src={site.thumbnail} />
              </a>
            </Col>
            </Row index={index}>
    );
  }

   return (
      websiteData.map((site, index) => {
        return (
          <React.Fragment>
            {index % 3 == 0 ? <Row /> : <span />}
            <Col md="4">
              <a>
                <img style={{ maxWidth: '100%' }} src={site.thumbnail} />
              </a>
            </Col>
           {index + 1 % 3 == 0 ? </Row> : <span /> }
          </React.Fragment>
        )
      })
    )