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

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;

这很好用吗？

从 '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;

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

后者可以正常工作，因为 check 值没有发生应出现在 DOM 上的更改。如果 check 更改会影响并触发 React 渲染功能，您可能希望为 show/hide 条件使用状态。

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;

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

React / Functional component / Conditional render on callback / Not Working

javascript

reactjs

conditional-rendering