反应/功能组件/回调条件渲染/不工作

Question

为什么这不起作用？

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;

这工作正常吗？

从“反应”导入反应；

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;

基本上我尝试根据条件渲染组件。 这是一个非常基本的例子。 但我所拥有的非常相似。 如果您想知道为什么我需要更新 function 内部的检查变量是因为在我的示例中我有一个回调 function 在那里我收到一个我需要在该新组件中使用的 ID。

我提供给您的示例基本上是一个按钮，当我按下这个按钮时，我想显示另一个按钮。 我是 React 的新手，尽管我在过去 2 小时内搜索了解决方案，但我找不到任何解决此问题的方法。

任何提示都非常感谢！

Answer 1

当您单击按钮时，您的组件不知道发生了什么变化。 你需要使用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时，React 基本上决定需要重新渲染，并更新视图。

Answer 2

后者正在工作，因为应该出现在 DOM 上的check值没有变化。 如果check更改会影响并触发 React 渲染 function，您可能需要使用 state 来显示/隐藏条件。

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;