一种实现批量渲染对象元素（元素为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 将报如下错
Exception: Warning: Functions are not valid as a React child. This may happen if you return a …
