Question

你可以告诉我如何在react js中呈现列表。我喜欢这个

https://plnkr.co/edit/X9Ov5roJtTSk9YhqYUdp?p=preview

class First extends React.Component {
  constructor (props){
    super(props);

  }

  render() {
     const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;

    return (
      <div>
      hello
      </div>
    );
  }
}

Answer 1

您可以通过两种方式实现：

<强>首先

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }

第二名：直接在回程

中写入地图功能

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }

Answer 2

https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions

您可以将任何JavaScript表达式作为子表达式传递，方法是将其括在{}中。例如，这些表达式是等价的：
<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>
这通常用于呈现任意长度的JSX表达式列表。例如，这会呈现一个HTML列表：
function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

class First extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [{name: 'bob'}, {name: 'chris'}],
    };
  }
  
  render() {
    return (
      <ul>
        {this.state.data.map(d => <li key={d.name}>{d.name}</li>)}
      </ul>
    );
  }
}

ReactDOM.render(
  <First />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

Shubham的答案解释得很好。该答案是按需添加的，以避免某些陷阱并重构为更具可读性的语法

陷阱：在渲染对象数组时经常会出现误解，尤其是对数据执行更新或删除操作时。用例就像从表行中删除项目。有时，当预期要删除的行不会被删除而其他行将被删除。

要避免，请在key的JSX树中循环的根元素中使用.map()属性。另外，通过调用方法呈现时，添加React的Fragment可以避免在ul和li之间添加另一个元素。

state = {
    userData: [
        { id: '1', name: 'Joe', user_type: 'Developer' },
        { id: '2', name: 'Hill', user_type: 'Designer' }
    ]
};

deleteUser = id => {
    // delete operation to remove item
};

renderItems = () => {
    const data = this.state.userData;

    const mapRows = data.map((item, index) => (
        <Fragment key={item.id}>
            <li>
                {/* Passing unique value to 'key' prop, eases process for virtual DOM to remove specific element and update HTML tree  */}
                <span>Name : {item.name}</span>
                <span>User Type: {item.user_type}</span>
                <button onClick={() => this.deleteUser(item.id)}>
                    Delete User
                </button>
            </li>
        </Fragment>
    ));
    return mapRows;
};

render() {
    return <ul>{this.renderItems()}</ul>;
}

重要：决定使用应该传递给key属性的值也很重要，因为通常的方法是使用index提供的.map()参数。

TLDR；但是它有一个缺点，那就是尽可能避免它，并从正在迭代的数据中使用任何唯一的id，例如item.id。有一篇很好的文章-https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Answer 4

尝试一下：

public class SysAutoIdController : Controller
{
   public SysAutoIdController(ApplicationDbContext db)
   {
      _db = db;
   }

   ... 
}

Answer 5

import React from 'react';

class RentalHome extends React.Component{
    constructor(){
        super();
        this.state = {
            rentals:[{
                _id: 1,
                title: "Nice Shahghouse Biryani",
                city: "Hyderabad",
                category: "condo",
                image: "http://via.placeholder.com/350x250",
                numOfRooms: 4,
                shared: true,
                description: "Very nice apartment in center of the city.",
                dailyPrice: 43
              },
              {
                _id: 2,
                title: "Modern apartment in center",
                city: "Bangalore",
                category: "apartment",
                image: "http://via.placeholder.com/350x250",
                numOfRooms: 1,
                shared: false,
                description: "Very nice apartment in center of the city.",
                dailyPrice: 11
              },
              {
                _id: 3,
                title: "Old house in nature",
                city: "Patna",
                category: "house",
                image: "http://via.placeholder.com/350x250",
                numOfRooms: 5,
                shared: true,
                description: "Very nice apartment in center of the city.",
                dailyPrice: 23
              }]
        }
    }
    render(){
        const {rentals} = this.state;
        return(
            <div className="card-list">
                <div className="container">
                    <h1 className="page-title">Your Home All Around the World</h1>
                    <div className="row">
                        {
                            rentals.map((rental)=>{
                                return(
                                    <div key={rental._id} className="col-md-3">
                                        <div className="card bwm-card">
                                        <img 
                                        className="card-img-top" 
                                        src={rental.image}
                                        alt={rental.title} />
                                        <div className="card-body">
                                        <h6 className="card-subtitle mb-0 text-muted">
                                            {rental.shared} {rental.category} {rental.city}
                                        </h6>
                                        <h5 className="card-title big-font">
                                            {rental.title}
                                        </h5>
                                        <p className="card-text">
                                            ${rental.dailyPrice} per Night &#183; Free Cancelation
                                        </p>
                                        </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                        
                    </div>
                </div>
            </div>
        )
    }
}

export default RentalHome;

Answer 6

试试下面这个app.js文件中的代码，简单易懂

function List({}) {
  var nameList = [
    { id: "01", firstname: "Rahul", lastname: "Gulati" },
    { id: "02", firstname: "Ronak", lastname: "Gupta" },
    { id: "03", firstname: "Vaishali", lastname: "Kohli" },
    { id: "04", firstname: "Peter", lastname: "Sharma" }
  ];
  const itemList = nameList.map((item) => (
    <li>
      {item.firstname} {item.lastname}
    </li>
  ));
  return (
    <div>
      <ol style={{ listStyleType: "none" }}>{itemList}</ol>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <List />
    </div>
  );
}

如何在React中渲染对象数组？

6 个答案: