React - 在迭代中显示/隐藏文本对总是显示所有文本而不是选定元素 - 为啥？

Posted 2023-02-24

【中文标题】React - 在迭代中显示/隐藏文本对总是显示所有文本而不是选定元素 - 为啥？

【英文标题】：React - show / hide for text pairs in iteration always shows all text instead of selected element - why?React - 在迭代中显示/隐藏文本对总是显示所有文本而不是选定元素 - 为什么？

【发布时间】：2018-08-31 19:58:09

【问题描述】：

我正在遍历相应的问题/答案，当我单击特定问题时，我想显示答案/并在再次单击同一问题时将其隐藏。我将类从隐藏更改为显示（onclick）特定答案。但是，单击时会显示或隐藏所有问题/答案。我究竟做错了什么？谢谢！

import React, Component from "react";
import messages from "./messages.js";

class Faq extends Component 
    constructor() 
        super();
        this.state = show: false;
    

    handleClick() 
        this.setState(
            show: !this.state.show
        );
    

    render() 
        const qa = messages.faqs.category1.map((item, index) => 
            return (
                <div key=index>
                    <p className="App-intro">
                        <button className="question" onClick=() => this.handleClick()>item.question</button>
                    </p>
                    <p className=!this.state.show ? 'hidden' : 'show'>item.answer</p>

                </div>
            )
        );

        return (
            <div className="App">
                qa
            </div>
        );
    
   
export default Faq;

问题/答案对象/数组：

export default 
    "faqs": 
        "category 1": [
            
                "question": "question 1?",
                "answer": "answer 1",
            ,
            
                "question": "question 2?",
                "answer": "answer 2",
            ,
            
                "question": "question 3?",
                "answer": "answer 3",
            
        ]
        // ...category 2 etc
    

css:

.hidden
  display: none;

.show 
  display: block;

【问题讨论】：

变量show 没有链接到问题，但这是一个全局变量

谢谢。如何链接？

您必须以每个问题都有自己的显示/隐藏变量与之关联的方式来构建它。您可以在这个 FAQ 组件中跟踪它，但我认为更简单的方法是为问题创建一个新组件，并且该组件的状态将有一个布尔值来确定它是否隐藏。

@2018code2018 你的对象应该像"question": "question 1?","answer": "answer 1", "show": true

【参考方案1】：

您可以像这样渲染/不渲染该元素，而不是处理类名：

    this.state.show && <p>item.answer</p>

你把它放在你的渲染函数中的一个 div 中。您应该使用代码更改一些其他内容。但是，这将让你开始。请注意，该状态将应用于您的所有问题，因此您可能需要添加额外的复杂性，例如每个单独问题的显示状态。

【参考方案2】：

你可以这样做。

让我们假设您的问题和答案是成对出现的。 制作一对组件并为切换分配一个状态。然后将此组件迭代到您的问题数量的长度。因此，您将没有动态的与问题相同的组件，并且每个组件都有自己的状态。