Блог

У меня есть очень простая программа, которая должна скрывать квадрат при нажатии кнопки I. В игровом компоненте, похоже, он обновляется нормально всякий раз, когда я нажимаю кнопку, и отправляет предупреждение всякий раз, когда я нажимаю кнопку с текущей видимостью. Но когда я пытаюсь обновить видимость квадрата, это не работает.

 import React from "react"; import ReactDOM from "react-dom"; import "./index.css";

function Square(props) {
    return (
        <div className="square" style={{ visibility: props.visibility }}></div>
    ); }

function Button(props) {
    return (
        <button type="button" onClick={props.onClick}>
            Click to hide square!
        </button>
    ); }

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visibility: "visible",
        };
    }
    handleClick() {
        this.setState({
            visibility:
                this.state.visibility == "visible" ? "hidden" : "visible",
        });
        alert(this.state.visibility);
    }
    render() {
        return (
            <div>
                <Button
                    onClick={() => this.handleClick()}
                    visibility={this.state.visibility}
                />
                <Square />
            </div>
        );
    } }

ReactDOM.render(<Game />, document.getElementById("root"));
 

потому что ваш квадратный компонент не добавляет видимость реквизита для управления

 import React from "react"; import ReactDOM from "react-dom"; import "./index.css";

function Square(props) {
    return (
        <div className="square" style={{ visibility: props.visibility, background:'red',width:'100px', height:'100px' }}></div>
    ); }

function Button(props) {
    return (
        <button type="button" onClick={props.onClick}>
            Click to hide square!
        </button>
    ); }

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visibility: "visible",
        };
    }
    handleClick() {
        this.setState({
            visibility:
                this.state.visibility == "visible" ? "hidden" : "visible",
        });
        alert(this.state.visibility);
    }
    render() {
        return (
            <div>
                <Button
                    onClick={() => this.handleClick()}
                    visibility={this.state.visibility}
                />
                <Square visibility={this.state.visibility} />
            </div>
        );
    } }

ReactDOM.render(<Game />, document.getElementById("root"));