web-dev-qa-db-ja.com

React renderでマップによって返される配列のサイズを取得します

Reactコンポーネントのrenderメソッドでarray.mapを使用しています。動作しますが、レンダリングする行数を知りたいです。コンストラクターでthis.numRows = 0を初期化し、mapコールバックでインクリメントします。

<div>
        <p>Number of rows = {this.numRows}</p>
        {this.state.members.map((member) => {
          if (member.display) {
            this.numRows++;
            return <p>{ member.name }</p>  
          }
        })}
      </div>

しかし、これはまだゼロを示しています。ここに完全なコード： jsfiddle.net/ra13jxak/ 。返された行数を表示するにはどうすればよいですか？

javascriptarraysreactjs
4
GluePear

最初に表示するメンバーをフィルタリングしてから、結果の配列の長さを表示し、それをマッピングしてメンバーをレンダリングすることを検討してください。

フィドル

render() {
    const membersToRender = this.state.members.filter(member => member.display)
    const numRows = membersToRender.length

    return (
      <div>
        <p>Number of rows = {numRows}</p>
        {
          membersToRender.map((member, index) => {
            return <p key={index}>{ member.name }</p>
          })
        }
      </div>
    );
  }

編集：エドガーヘンリケスに感謝

5
Michael Horn

それをコンポーネントに抽出するのは良い考えだと思います：

JSFiddleの例

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      members: [
        ..
      ],

      visibleMembers() {
        return this.members.filter(m => m.display)
      }
    }
  }

  render() {
    const members =  this.state.visibleMembers()

    return (
      <div>
        <p>Number of rows = {members.length}</p>
        {members.map(m => <p key={ m.id }>{ m.name }</p>)}
      </div>
    )
  }
}

警告を抑制するためにkey属性を追加しました。詳細については React Documentation を参照してください。

2
Danil Speransky

Filterを使用して新しい配列を生成し、それを使用して行数を表示し、それを反復処理できます。このような：

const members = this.state.members.filter(member => member.display)
return (
  <div>
    <p>Number of rows = { members.length }</p>
    {members.map(member => <p>{ member.name }</p>)}
  </div>
)
1
Cesar William

単にこれを使用してください：

{this.state.members.length}
0
Mohammad Zebardast

ケースの表示属性である特定の条件でthis.state.membersにフィルターを使用するだけです

要素の周りにdivをラップして実際にレンダリングされた要素の数を取得するか、特定の条件を持つフィルターを適用した後でlengthメソッドを使用できます。

次のようにRenderを実装します。

render(){
    return (
    <div>
       <p>Number of rows = {this.numRows}</p>
       <div id="members-with-display">
         {(this.state.members.filter((value)=>{return value.display})).map((member) => {
             return <p>{ member.name }</p>  
         })}
    </div>
    </div>
    );
}

次のように、レンダリングされた行を認識する関数を使用できます。

getRenderedRows(){
//Either you can use this
return document.getElementById("members-with-display").childElementCount;
 // Or this
return this.state.members.filter((value)=>{return value.display}).length;
}
0
Muhammad Danial Iqbal