javascript - 警告：收到布尔属性“隐藏”的字符串“真”

Question

我正在尝试制作一个在点击时打开和关闭的手风琴。我所有的数据都存储在 .json 文件中。即使布尔值正在改变（我通过控制台检查），它也不起作用。我的控制台也给出了以下警告：警告：收到true布尔属性的字符串hidden。虽然这可行，但如果您传递字符串“false”，它将无法按预期工作。你是说 hidden={true} 吗？ 当我手动将“假”或“真”传递给“隐藏”时，它会相应地显示手风琴的内容。我和盖茨比一起工作。这是我的代码：

handleClick(e, id) {
    const itemIndex = this.props.jobOpenings.findIndex(i => i.id === id);
    const item = { ...this.props.jobOpenings[itemIndex] };
    const items = [...this.props.jobOpenings];

    item.isCollapsed = !this.props.jobOpenings[itemIndex].isCollapsed;
    item.isAriaExpanded = !this.props.jobOpenings[itemIndex].isAriaExpanded;
    item.isHidden = !this.props.jobOpenings[itemIndex].isHidden;

    items[itemIndex] = item;
    this.setState({ items: items });
}

constructor(props) {
    super(props);
    this.state = {
        items: [...this.props.jobOpenings]
    };
    this.handleClick = this.handleClick.bind(this);
}

render() {
    const items = this.props.jobOpenings;
    return (
        {
            items.map(item =>
                <div key={item.id}>
                    <button className="accordion-btn" onClick={(e) => this.handleClick(e, item.id)} aria-label="Careers">
                        <span className="accordion-title" id={item.id} aria-expanded={items[item.id].isAriaExpanded}>{item.title}</span>
                        <span className="accordion-icon" aria-hidden="true"> {items[item.id].isCollapsed ? <Plus /> : <Minus />} </span>
                    </button>
                    <div className="accordion-content" hidden={items[item.id].isHidden}>
                        <p className="accordion-content-title">Job Description</p>
                        <p>•  {item.requirementOne}</p>
                        <p>•  {item.requirementTwo}</p>
                        <p>•  {item.requirementThree}</p>
                        <p className="accordion-content-title">Required Skills</p>
                        <p>•  {item.requiredSkills}</p>
                        <p className="accordion-content-title">Required Experience</p>
                        <p>•  {item.requiredExperience}</p>
                        <p className="accordion-content-title">Preferred Education</p>
                        <p>•  {item.requiredEducation}</p>
                    </div>
                </div>
            )
        }
    )
}

标签： javascriptreactjs