如何在渲染中自动递增索引并打印数组值？

Question

我有一个名称数组，我需要循环索引并在渲染中打印名称

    const names = ['John','Sara','Michael','Timothy']`

render: (props) => ({

<div>

props=names[];

</div>

});

Answer 1

您可以使用for ... in循环来迭代索引。const names = ['John','Sara','Michael','Timothy'];for(const index in names) {&nbsp; console.log(`${index} of ${names[index]}`);&nbsp;}

Answer 2

const names = ["John", "Sara", "Michael", "Timothy"];class Content extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {};&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h1>Names</h1>&nbsp; &nbsp; &nbsp; &nbsp; {this.props.names ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.props.names.map((name, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p key={name + index}>{name}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>No names found</p>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}ReactDOM.render(<Content names={names} />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="app"> </div>

Answer 3

您可以使用它map()来完成您的需求。&nbsp; &nbsp;render() {&nbsp; &nbsp; &nbsp;const names = ['John','Sara','Michael','Timothy'];&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { names.map((name, index) => <div key={index}>{ name }</div> }&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;);&nbsp; &nbsp;}

Answer 4

您必须改进代码的一部分。它看起来不像是 JSX 部分。在这里，我想它可以是：render() {&nbsp; &nbsp; const names = ['John','Sara','Michael','Timothy'];&nbsp; &nbsp; return <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {names.map((item, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>;}