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

【问题标题】：React / Functional component / Conditional render on callback / Not Working反应/功能组件/回调条件渲染/不工作
【发布时间】：2021-03-14 23:49:09
【问题描述】：

为什么这不起作用？

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;

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

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

非常感谢任何提示！

【问题讨论】：

reactjs.org/docs/state-and-lifecycle.html ;)
使用状态是 React 的核心机制 :)

标签： javascript reactjs conditional-rendering

【解决方案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 基本上决定需要重新渲染，并更新视图。

【讨论】：

【解决方案2】：

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

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;

【讨论】：