web-dev-qa-db-ja.com

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>
    );
  }
}
javascriptreactjsreact-router
37
user944513

次の2つの方法で実行できます。

最初：

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>
    );
  }
57
Shubham Khatri

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>
9
DTing

Shubhamの答えは非常によく説明しています。この答えは、いくつかの落とし穴を避け、より読みやすい構文にリファクタリングするための追加です

Pitfall：特にデータに対して実行される更新または削除アクションがある場合、オブジェクトの配列のレンダリングには一般的な誤解があります。ユースケースは、テーブル行からアイテムを削除するようなものです。削除されるはずの行が削除されず、他の行が削除される場合があります。

avoid thisにするには、.map()のJSXツリーでループオーバーされるルート要素でkey propを使用します。また、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>;
}
0
Meet Zaveri