我一直在思考如何最好地在React JS中有条件地应用CSS类.我已经看到一些答案,但是那里没有很多,或者它们并不像我想的那么精致.
我正在建立我对React JS的了解,我想导入/包含一些外部JS文件,这些文件只包含一个对象/对象数组.我已经在jQuery,Vanilla JS甚至Angular JS中完成了这个.甜!!!
如何在React JS中实现相同的功能.
我有以下作为我的index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
</head>
<body>
<div id="hello"></div>
<div id="world"></div>
<div id="caseListing"></div>
<script src="js/bundle.js"></script>
</body>
</html>
和我的main.js(条目文件)如下:
import Hello from './jsx/hello.jsx';
import World from './jsx/world.jsx';
var $ = require('./lib/jquery.js');
window.jQuery = $;
window.$ = $;
var Jobs = require('./data/jobs.js');
console.log('Jobs:', Jobs);
在这里,我有Jobs.js:
var Jobs = (function () {
"use strict";
return {
"jobs": [
{
"jobType": "Web developer",
"desc": "Creates website"
},
{
"jobType": "Bin Man",
"desc": "Collects bins" …我想要实现的是，如果 ID 的前两位数字匹配，则将对象组合到一个数组中。因此，鉴于以下对象数组，我想转换此原始数组：
[
{
"id": "0100",
"name": "name 1",
"message": "Lorem blah blah 1"
},
{
"id": "0101",
"name": "",
"message": "Lorem blah blah 1.1"
},
{
"id": "0200",
"name": "name 2",
"message": "Lorem blah blah 2"
},
{
"id": "0201",
"name": "",
"message": "Lorem blah blah 2.1"
},
{
"id": "0202",
"name": "",
"message": "Lorem blah blah 2.2"
},
{
"id": "0300",
"name": "name 3",
"message": "Lorem blah blah 3"
},
{
"id": "0301",
"name": "",
"message": "Lorem …