代码之家 › 专栏 › 技术社区 › paulalexandru

响应/功能组件/回调条件呈现/不工作

conditional-rendering reactjs javascript

paulalexandru · 技术社区 · 4 年前

为什么这不起作用?

import React from 'react';

function Room() {
    let check = null;

    const ibegyouwork = () => {
        check = <button>New button</button>;
    } 

    return (
        <div>
            <button onClick={ibegyouwork}>Display my button now !!!!</button>    
            {check}
        </div>
    );
}

export default Room;

从“React”导入React;

function Room() {
    let check = null;

    return (
        <div>
            <button>No need for this button because in this case the second button is auto-displayed</button>    
            {check}
        </div>
    );
}

export default Room;

我提供给你们的例子基本上是一个按钮,当我按下这个按钮时,我想显示另一个按钮。我是一个新的反应,尽管我在过去的两个小时内寻找解决方案,我找不到任何东西来解决这个问题。

任何提示都非常感谢!

2 回复 | 直到 4 年前

Dean James 4 年前

当您单击按钮时,您的组件不知道发生了什么变化。你需要使用 state 为了告知React需要重新提交:

import React, {useState} from 'react'

function Room() {
    const [check, setCheck] = useState(null);

    const ibegyouwork = () => {
        setCheck(<button>New button</button>);
    } 

    return (
        <div>
            <button onClick={ibegyouwork}>Display my button now !!!!</button>
            {check}
        </div>
    );
}

export default Room;

当你打电话的时候 setCheck

Shimi 4 年前

后者之所以起作用,是因为没有对 check 应该出现在DOM上的值。如果 检查

import React from 'react';

const Check = () => <button>New button</button>;

function Room() {
    const [show, setShow] = React.useState(false);

    const ibegyouwork = () => {
        setShow(true);
    } 

    return (
        <div>
            <button onClick={ibegyouwork}>Display my button now !!!!</button>    
            {show && <Check />}
        </div>
    );
}

export default Room;

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前