Question

这很新，并且有一个我想应该很容易回答的问题。

我基本上有一个包含5个标题的页面。当我单击标题时，它将渲染该组件。我有，但是我不知道该如何使5个冠军消失？呈现的组件仅显示在标题下方，我希望它们完全切换。进行了大量的谷歌搜索，似乎做得不好。

XYZ.js

import '../App.css';
import Button from 'react-bootstrap/Button'
import { BrowserRouter, Route, Router, Link } from "react-router-dom";

import Chat from './chat.js';

export class XYZ extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showChat: false,
        };
        this._onChatClick = this._onChatClick.bind(this);
    }

    _onChatClick() {
        this.setState({
            showChat: !this.state.showChat,

        });
    }

    render() {
        return (
            <div className="yyy">
                <div className="xxx">

                    <div className="chatBody">
                        <Button className="chatTitle" onClick={this._onChatClick}>
                            Chat xxz
                        </Button>
                        {this.state.showChat ?
                            <Chat /> : null
                        }
                    </div>
                     <div>
                          ....brevity
                     </div>
                </div>
            </div>

        );
    }
}

export default XYZ;

谢谢您的帮助！！必要时可以提供其他文件

Answer 1

可以发表评论，但我想您想让<Button className="chatTitle">在单击时消失。

您需要在三元运算符中将其放在null的位置，或者将另一个条件渲染放在现有的顶部，例如：

{!this.state.showChat && <Button className="chatTitle">Chat xxz</Button>}

反应：切换渲染组件

1 个答案: