时间戳

首页 > 解决方案 > 在反应中单击时，从多个 div 列表中切换仅一个 div 的下拉列表

reactjs - 在反应中单击时，从多个 div 列表中切换仅一个 div 的下拉列表

问题描述

当单击其兄弟 div 时，我试图切换隐藏和显示无序列表。起初我的代码是切换所有 div，我为每个列表添加了唯一标识符并修改了我的代码，但现在没有任何东西被切换。我会很感激你的帮助。

子组件

import React from 'react';

const List = ({toggle, type, sum, i, hidden}) => {
    let visibility = {hidden} ? 'block' : 'none';
 
    return(
        <div>
            <div onClick={() => toggle(i)} style={{background: 'blue'}}>{type}</div>
            <ul>
            {
                sum.map((item) => {
                    return  <div style=style={{ display: visibility}}>{item}</div> 
                })
            }
            </ul>
        </div>
    )
}

export default List;

父组件

import React from 'react'
import List from './List';
import listData from './listData.js';

class App extends React.Component {
    constructor(){
        super();
        this.state = {
            show: listData.map((element) => true)
        }
    }

    hideShow = (index) => {
        const newShowStatus = [...this.state.show];
        newShowStatus[index] = !this.state.show[index];
        this.setState({show: newShowStatus});       
    }
render(){
        const list = listData.map((item, index) => {
            return <List 
            type={item.type} sum={item.summary} 
            i={index} 
            toggle={this.hideShow.bind(this)}
            hidden={this.state.show[index]}/>                 
        })
        return(
            <div className="tc ma4">
                {list}
            </div>
        )
    }
}

export default App;

标签： reactjs

解决方案

您可以使用动态渲染，而不是动态更改 css 属性。

当你有时hidden = false，告诉List渲染ul标签。

{!hidden && (
  <ul>
    {sum.map((item, index) => (
      <div key={item + index}>{item}</div>;
    )}
  </ul>
)}

请记住为您使用该函数渲染的每个标签添加一个唯一键map，这非常重要！

一个工作示例

推荐阅读