javascript - 在 map 循环中计数 jsx

Question

{items.filter(item => item.status === 'active').map(item =>
    let total_male = item.length + 1;
    <p>Male ({total_male})</p>
    {this.renderData(item)}
    </div>
)}

上面的jsx有效吗？这对我来说有意义，但有错误。我有一个像这样的 json

[{"name":"james","satus":"active"},{"name":"alice","satus":"deactived"}]

我想计算状态为事件的 obj 长度。

Answer 1

这样写:

var a = [
           {"name":"james","status":"active"},
           {"name":"alice","status":"deactived"}
];

class App extends React.Component { 

    _createList() {
       let count=0, active;
       active = a.filter(item => item.status === 'active');
       count = active.length;
       return active.map(item => <div>
              <p>Male Count: {count}</p>
              {this.renderData(item)}
            </div>
        )
       }
       
       renderData(item){
          return <div>{item.name}</div>
       }

    render() {
        return (
            <div>
               {this._createList()}
            </div>
        )
    }
}


ReactDOM.render(<App />, document.getElementById('container'));

<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='container'/>