React.js遍历数组和开关 [英] Reactjs looping through array and switch

问题描述

我有一个reactjs组件，我试图通过循环和切换来呈现数据.

I have a reactjs component and I am trying to render the data with a loop and switch.

我尝试了一个地图，然后尝试了一个forEach-但它声称它不是函数.

I tried a map and then a forEach -- but it claims its not a function.

json看起来像这样.

the json looks like this.

//json

"contents": {
          "0": ["emotional distress", "behavioural difficulties", "hyperactivity and concentration difficulties", "difficulties in getting along with other young people"],
          "5": ["kind and helpful behaviour"]
        }

//组件

var YourCurrentStanding = React.createClass({

    alertLevel: function (key) {
      switch (key) {
        case '0': return "very high";
        case '1': return "high";
        case '5': return "very low";
        default: return "xy";
      } 
    },

    render: function () {
        console.log('this.props.data.contents', this.props.data.contents)
        return (
            <div>
                {
                  this.props.data.contents.forEach(function(j) {
                    return <p key={j}>Score for x,y and z {this.alertLevel(j)}</p>
                  })
                }
            </div>
        );
    }
});

-----------应该读为

----------- should read like

"<p>Score for emotional distress, behavioural difficulties, hyperactivity and concentration difficulties very high and difficulties in getting along with other young people very high</p>

<p>Score for kind and helpful behaviour very low</p>"

---

在工作代码附近添加了语法检查

---

near working code with a grammar check added

var YourCurrentStanding = React.createClass({

    grammarCheck : function(vals) {
      //x,y,z and d
      //z

      return vals.join(', ')
    },


    alertLevel: function(key) {
      switch (key) {
        case "0":
          return "very high";
        case "1":
          return "high";
        case "5":
          return "very low";
        default:
          return "xy";
      }
    },

    render: function() {
      return (
      <div>
        {Object.keys(this.props.data.contents).map((key, index) => {      
            return <p key={index}>Score for {this.grammarCheck(this.props.data.contents[key])} is <b>{this.alertLevel(key)}</b></p>
        })}
      </div>
      );
    }
});

推荐答案

在这里是:(将示例 data 对象用于演示)

Here it is: (Took sample data object for demo)

var data = {
  contents: {
    "0": [
      "emotional distress",
      "behavioural difficulties",
      "hyperactivity and concentration difficulties",
      "difficulties in getting along with other young people"
    ],
    "5": ["kind and helpful behaviour"]
  }
};

var YourCurrentStanding = React.createClass({
  alertLevel: function(key) {
    switch (key) {
      case "0":
        return "very high";
      case "1":
        return "high";
      case "5":
        return "very low";
      default:
        return "xy";
    }
  },
  
  joinContents: function(data, key) {
    return [ data[key].slice(0, -1).join(", "), data[key].slice(-1)[0]         
           ].join(data[key].length < 2 ? "" : " and ");
     
    /*
     data[key].slice(0, -1).join(", "): takes all keys except last and joins them together with a comma.
     data[key].slice(-1)[0]: Last key
    */
  },

  render: function() {
    return (
      <div>
        {Object.keys(data.contents).map((key, index) => {
          return (
            <p key={index}>
              Score for {this.joinContents(data.contents, key)} is {" "}
              <b>{this.alertLevel(key)}</b>
            </p>
          );
        })}
      </div>
    );
  }
});

ReactDOM.render(<YourCurrentStanding />, document.getElementById("app"));

<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="app"/>

这篇关于React.js遍历数组和开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！