我正在尝试从 JSON 加载项目,并在单击时切换带有描述的下拉 div。虽然我可以在静态 div 上按顺序显示元素(例如:loc1 & desc1、loc2 & desc2
),但当第二部分 (desc) 隐藏且仅显示时,我很难找到如何正确渲染它单击 loc div 时显示。
映射结果的最佳方式是什么,这样它就不会显示为 loc1 & loc2, desc1 & desc2
而是显示为 loc1 & desc1, loc2 & desc2
?
代码:
var places = {
library: {
location: [
{
loc_name: "library1",
"desc": "desc1 : Modern and spacious building"
},
{
loc_name: "library2",
"desc": "desc2 : A cosy small building"
}
]
}
};
function contentClass(isShow) {
if (isShow) {
return "content";
}
return "content invisible";
}
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { isShow: false };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(function (prevState) {
return { isShow: !prevState.isShow };
});
}
render() {
const libraries_desc = places.library.location.map((libr) =>
<div>
<p>{libr.desc}</p>
</div>
);
const lib_names = places.library.location.map((libr) =>
<div>
<p>{libr.loc_name}</p>
</div>
);
return (
<div>
<div className='control' onClick={this.handleClick}>
<h4>{lib_names}</h4>
<div className={contentClass(this.state.isShow)}>{libraries_desc}</div>
</div>
</div>
);
}
}
render((
<Toggle />
), document.getElementById('root'));
当前结果:
library1
library2
desc1 : Modern and spacious building
desc 2 : A cosy small building
期望的结果:
library1
desc1 : Modern and spacious building (hidden but shown when clicked)
library2
desc 2 : A cosy small building (hidden but shown when clicked)
最佳答案
我可能会尝试将位置提取到单独的组件中。通过提取它,每个位置都有责任了解其状态。在您的情况下,这意味着它的可见性(由 this.state.isShow
控制)。
具体操作方法如下:
import React from 'react';
import { render } from 'react-dom';
var places = {
library: {
location: [
{
loc_name: "library1",
"desc": "Modern and spacious building"
},
{
loc_name: "library2",
"desc": "A cosy small building"
}
]
}
};
class Location extends React.Component {
constructor(props) {
super(props);
this.state = { isShow: false };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(function (prevState) {
return { isShow: !prevState.isShow };
});
}
contentClass(isShow) {
if (isShow) {
return "content";
}
return "content invisible";
}
render() {
return (
<div className='control' onClick={this.handleClick}>
<h4>{this.props.desc}</h4>
<div className={this.contentClass(this.state.isShow)}>{this.props.loc_name}</div>
</div>
)
}
}
class Toggle extends React.Component {
constructor(props) {
super(props);
}
render() {
const locations = places.library.location.map(location => {
return <Location {...location} />
})
return (
<div>
{locations}
</div>
);
}
}
render((
<Toggle />
), document.getElementById('root'));
关于javascript - ReactJS:如何按顺序映射 JSON 元素并在单击时显示隐藏的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47997961/