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

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) {

  console.log(`${index} of ${names[index]}`); 

}

Answer 2

const names = ["John", "Sara", "Michael", "Timothy"];

class Content extends React.Component {

  constructor(props) {

    super(props);

    this.state = {};

  }

  render() {

    return (

      <div>

        <h1>Names</h1>

        {this.props.names ? (

          this.props.names.map((name, index) => (

            <p key={name + index}>{name}</p>

          ))

        ) : (

          <p>No names found</p>

        )}

      </div>

    );

  }

}

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()来完成您的需求。

   render() {

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

   

     return (

        <div>

            { names.map((name, index) => <div key={index}>{ name }</div> }

        </div>

     );

   }

Answer 4

您必须改进代码的一部分。它看起来不像是 JSX 部分。在这里，我想它可以是：

render() {

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

    return <div>

            {names.map((item, index) => (

               <div key={index}>

                  {item}

               </div>

            ))}

          </div>;

}