javascript - 使用 ReactJS 从数组创建 li 标签

Question

我使用的是 React，没有 JSX 或 Redux

基本上我想创建一个 div，而不是为数组创建列表项

var arrr = ['foodA', 'foodB', 'FoodC'];

我想要看起来像

• 食物A
• 食物B
• 食物C

我想我需要使用

 var answer = React.createElement("div", null, arrr);

然后使用

dom.div.apply(dom, [{}],
slice.call(otherdata),answer);

除了我不知道如何将它们转换成列表。 div(如上所示)仅创建一个容器 div，数组中的所有元素都在输出中。我尝试将“div”更改为“li”，容器为“li”，结果相同。

问题:如何将 arr 转换为列表？我想我可能需要执行嵌套的 createElements，或者以某种方式执行 foreach 循环，但我不太确定。

感谢任何帮助!

谢谢

鸟

Answer 1

使用.map()方法!

import React from 'react';

class NewComponent extends React.Component {
	render() {
		let arrr = ['foodA', 'foodB', 'FoodC'];

		let answer = arrr.map((food, index) => {
			return React.createElement(
				'li',
				{ key: index },
				food
			);
		});

		return React.createElement(
			'ul',
			null,
			answer
		);
	}
};

如果您确实想使用 JSX，则代码如下:

import React from 'react';

class NewComponent extends React.Component {
	render(){
  		let arrr = ['foodA', 'foodB', 'FoodC'];

		let answer = arrr.map((food, index) => {
 			return <li key={ index }>{ food }</li>; 
		});
	
		return (
      		<ul>
  			{ answer }
			</ul>
  		);
	}
};

如果你了解 JSX 语法，但想获得 ES5 语法，我建议使用 Babel online transpiler