批量渲染数组（元素为react组件)的方法

最新推荐文章于 2025-04-08 16:58:24 发布

丰色木夕

最新推荐文章于 2025-04-08 16:58:24 发布

阅读量1.8k

点赞数

分类专栏： React.js 文章标签： react

本文链接：https://blog.youkuaiyun.com/youlinhuanyan/article/details/103440610

版权

React.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何批量渲染数组中的React组件元素，强调了在渲染过程中需要注意为数组元素添加key属性，以及确保第一个元素是一个React实例而非函数。提供了一段参考代码以帮助理解此过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一种实现批量渲染对象元素（元素为react组件）的方法
一种使用批量渲染数组（元素为react组件)的方法
思为：可直接对象一个数组进行渲染输出，前提是，数组元素应为react组件

参考代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}
function HelloMessage2(props) {
    return <h1>Hello World!</h1>;
}
const coms = {HelloMessage, HelloMessage2}
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  const tmps = [];
  for(let key in coms) {
  	const Comp = coms[key];
	tmps.push(<Comp key={key} />);
  }
  console.log(tmps)
  return (
    <ul>{tmps}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('example')
);
</script>

</body>
</html>

需要注意的坑

1、list元素需要加下key属性
2、render的第一个元素应为一个React实例，而不是某个方法即：

const com = <div>Hello</div>
const Hello = (props) =>{
   return (<div>Hello</div>)
}
render(com, div)         // r1.正解
render(<Hello />, div)   // r2.正解 
render(Hello, div)       //  r3. 报错

r3 将报如下错