我正在创建一个组件，其视图可以像手风琴一样打开和关闭。视图的数据来自以下 JSON 文件：
{
"tracks": [
{
"uid": "001",
"line_number": "S123456",
"feed": [
{
"line_number": "S123456",
"outer_situation": "low",
"departure_time": "2020-04-21T10:55Z"
},
{
"line_number": "S123456",
"outer_situation": "high",
"departure_time": "2020-04-21T10:55Z"
},
{
"line_number": "S123456",
"departure_time": "2020-04-21T10:55Z"
}
]
},
{
"uid": "002",
"line_number": "S00000",
"feed": [
{
"line_number": "S123456",
"outer_situation": "low",
"departure_time": "2020-04-21T10:55Z"
},
{
"line_number": "S123456",
"outer_situation": "high",
"departure_time": "2020-04-21T10:55Z"
},
{
"line_number": "S123456",
"outer_situation": "high",
"departure_time": "2020-04-21T10:55Z"
}
]
}
]
}
每个"轨道"代表一行，因此可以有无限数量的行。 当我的行关闭时，地图如下所示：
<div>
{connex.map((tracks) => (
<div
className={style.connection_container}
onClick={() => setShowConnections(!showConnections)}
onKeyPress={() => setShowConnections(!showConnections)}
role="button"
tabIndex="0"
>
<div span={1}>
</div>
<div span={3}>
<div className={style.vehicle_id}>
<p>{tracks.line_number}</p>
</div>
</div>
<div span={6}>
<span className={style.location_text}>
{tracks.origin}
</span>
<span> - </span>
<span className={style.location_text}>
{tracks.destination}
</span>
</div>
<div span={8}>
<div className={style.stop_point}>
<p>{tracks.stop_point}</p>
</div>
</div>
<div span={6}>
<span className={style.stop_point}>
<p>{tracks.arrival_time}</p>
</span>
</div>
</div>
))}
</div>
在添加映射的 JSON 数据之前，我使用的是创建 JSON 后将包含的信息，因此原始切换函数工作正常。但是，现在当我尝试在打开的视图中添加一个 .map 函数时，我在语法上做错了，我无法弄清楚它是什么。 https://stackblitz.com/edit/react-lnpfvu 错误：JSX expressions must have one parent element.
由于我已经有显示数据的条件，是否有更好的方法可以创建此切换组件来简化我访问数据的方式？
多个子潜水应包装到一个父潜水中，并且您的地图函数中没有任何父div。检查我添加注释的代码。试试这个：
import React, { useState } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import style from './style.css'
import data from './data.json'
const App = () => {
const [showConnections, setShowConnections] = useState(false);
const connex = data.tracks;
return (
<div className={style.interchange_connections}>
{/* default = closed */}
{!showConnections
? (
<div>
{connex.map((tracks) => (
<div
className={style.connection_container}
onClick={() => setShowConnections(!showConnections)}
onKeyPress={() => setShowConnections(!showConnections)}
role="button"
tabIndex="0"
>
<div span={1}>
</div>
<div span={3}>
<div className={style.vehicle_id}>
<p>{tracks.line_number}</p>
</div>
</div>
<div span={6}>
<span className={style.location_text}>
{tracks.origin}
</span>
<span> - </span>
<span className={style.location_text}>
{tracks.destination}
</span>
</div>
<div span={8}>
<div className={style.stop_point}>
<p>{tracks.stop_point}</p>
</div>
</div>
<div span={6}>
<span className={style.stop_point}>
<p>{tracks.arrival_time}</p>
</span>
</div>
</div>
))}
</div>
)
: (
<>
{/* opened view */}
<div>
{connex.map((tracks) => (
<div> {/* parent div */}
<div
className={style.connection_container}
onClick={() => setShowConnections(!showConnections)}
onKeyPress={() => setShowConnections(!showConnections)}
role="button"
tabIndex="0"
>
<div span={1}>
</div>
<div span={3}>
<div className={style.vehicle_id}>
<p>{tracks.line_number}</p>
</div>
</div>
<div span={6}>
<span className={style.location_text}>
{tracks.origin}
</span>
<span> - </span>
<span className={style.location_text}>
{tracks.destination}
</span>
</div>
<div span={8}>
<div className={style.stop_point}>
<p>{tracks.stop_point}</p>
</div>
</div>
<div span={6}>
<span className={style.stop_point}>
<p>{tracks.arrival_time}</p>
</span>
</div>
</div>
// start feed data
<div className={style.sub_container_wrapper}>
<div className={style.bracket} />
<div className={style.sub_container}>
<div span={1}>
</div>
<div span={2}>
<div className={style.vehicle_id}>
{tracks.feed[0].line_number} //use tracks not connex
</div>
</div>
</div>
</div>
</div> // parent div closed
))}
</div>
</>
)}
</div>
);
}
render(<App />, document.getElementById('root'));
您正在使用没有反应片段的多个元素或第 63 行index.js的任何元素， 尝试这样的事情，
{connex.map((tracks) => (
<> {/*!! here !!*/}
<div
className={style.connection_container}
onClick={() => setShowConnections(!showConnections)}
onKeyPress={() => setShowConnections(!showConnections)}
role="button"
tabIndex="0"
>
<div span={1}>
</div>
<div span={3}>
<div className={style.vehicle_id}>
<p>{tracks.line_number}</p>
</div>
</div>
<div span={6}>
<span className={style.location_text}>
{tracks.origin}
</span>
<span> - </span>
<span className={style.location_text}>
{tracks.destination}
</span>
</div>
<div span={8}>
<div className={style.stop_point}>
<p>{tracks.stop_point}</p>
</div>
</div>
<div span={6}>
<span className={style.stop_point}>
<p>{tracks.arrival_time}</p>
</span>
</div>
</div>
// start feed data
<div>
<div className={style.sub_container_wrapper}>
<div className={style.bracket} />
<div className={style.sub_container}>
<div span={1}>
</div>
<div span={2}>
<div className={style.vehicle_id}>
{connex.feed[0].line_number}
</div>
</div>
</div>
</div>
</div>
</> {/*!! here !!*/}
))}
检查我的方法。在我弄清楚多元素问题后，我遇到了一个 IndexError，因为您正在尝试访问可切换视图中的未知索引。