Question

我使用React而不使用JSX或Redux

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

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

我想看起来像

foodA
foodB
foodC

我认为我需要使用

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

然后使用

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

除了我不确定如何将它们转换为列表。 div（如上所示）仅创建一个容器div，并且数组中的所有元素都在输出中。我试过改变＆＃34; div＆＃34;到＆＃34; li＆＃34;而容器是＆＃34; li＆＃34;结果相同。

问题：如何将arrr转换为列表？我认为我可能需要做嵌套的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

使用ReactJS从数组创建li标签

1 个答案: