ReactJS:如何按顺序映射JSON元素并在点击时显示隐藏的div

我试图从JSON中加载项目,并在点击时使用描述切换下拉div。虽然我可以在静态div上按顺序显示元素(例如:loc1 & desc1, loc2 & desc2),但在第二部分(desc)隐藏时只能在点击loc loc时显示如何正确渲染它。ReactJS:如何按顺序映射JSON元素并在点击时显示隐藏的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)

Codesandbox

回答:

我可能会尝试将位置提取到单独的组件中。通过提取它,每个位置负责了解其状态。在你的情况下,这意味着它的可见性(由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'));

回答:

Toggle组件应b像这样。

class Toggle extends React.Component { 

constructor(props) {

super(props);

this.state = {

isShow: false,

id: -1, // initial value

};

}

handleClick = (id) => {

this.setState({

isShow: !this.state.isShow,

id: id

});

}

render() {

const { location } = places.library;

const { isShow, id } = this.state;

return (

<div className="control">

{location.map((libr, index) => (

<div key={index} onClick={() => { this.handleClick(index) }}>

<p>{libr.loc_name}</p>

{(isShow && (id === index)) && <p>{libr.desc}</p>}

</div>

))}

</div>

);

}

}

所以,当你点击div元素。点击事件将被触发,称为​​,它将传递index作为该函数的参数。这会将isShow设置为false或truth,反之亦然,以及要显示的当前元素将通过this.state.id进行选择。所以每次isShow为真,this.state.id匹配index数组的元素。您的描述将显示,否则它会隐藏,只要你想。

所以你想要的结果会是这样的。

library1 

desc1 : Modern and spacious building (hidden but shown when clicked)

library2

desc 2 : A cosy small building (hidden but shown when clicked)

以上是 ReactJS:如何按顺序映射JSON元素并在点击时显示隐藏的div 的全部内容, 来源链接: utcz.com/qa/267286.html

回到顶部