React为何无法显示Hello/Goodbye消息？求问题排查

我创建了一个带有下拉按钮的页面，按钮包含两个选项。希望点击按钮选项时能显示“Hello World”或“Goodbye World”，但功能无法正常工作，点击后无法展示对应消息。

点击菜单项时的界面截图：

我的代码如下：

import './App.css'

import {Amplify} from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';
import {Menu, MenuItem, MenuButton, Flex} from '@aws-amplify/ui-react';

Amplify.configure(awsExports);

function App() {
    function displayHello() {
        console.log("Loaded basic!")
        return <h1>Hello World</h1>
    }

    function displayGoodbye() {
        console.log("Loaded goodbye!")
        return <h1>Goodbye World</h1>
    }

    return (
        <Menu
            trigger={
                <MenuButton
                    variation="primary"
                    size="large"
                    width="20%">
                    Salutation
                </MenuButton>
            }
        >
            <MenuItem onClick={displayHello}>Hello</MenuItem>
            <MenuItem onClick={displayGoodbye}>Goodbye</MenuItem>
        </Menu>
    );
}

export default App;

请问我哪里出错了？

你代码的核心问题是：事件处理函数中返回的JSX元素不会自动渲染到页面上。React组件的渲染逻辑依赖于组件的返回值或状态变化触发的重新渲染，单纯在点击事件里返回JSX，React不会识别并展示它。

要解决这个问题，你需要用React的状态来控制要显示的内容，点击菜单选项时更新状态，再根据状态渲染对应的消息。修改后的代码如下：

import './App.css'

import { Amplify } from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';
import { Menu, MenuItem, MenuButton } from '@aws-amplify/ui-react';
import { useState } from 'react';

Amplify.configure(awsExports);

function App() {
    // 用useState创建状态变量，存储要显示的内容
    const [displayContent, setDisplayContent] = useState(null);

    function displayHello() {
        console.log("Loaded basic!")
        // 更新状态，设置要显示的Hello内容
        setDisplayContent(<h1>Hello World</h1>);
    }

    function displayGoodbye() {
        console.log("Loaded goodbye!")
        // 更新状态，设置要显示的Goodbye内容
        setDisplayContent(<h1>Goodbye World</h1>);
    }

    return (
        <div>
            <Menu
                trigger={
                    <MenuButton
                        variation="primary"
                        size="large"
                        width="20%">
                        Salutation
                    </MenuButton>
                }
            >
                <MenuItem onClick={displayHello}>Hello</MenuItem>
                <MenuItem onClick={displayGoodbye}>Goodbye</MenuItem>
            </Menu>
            {/* 根据状态渲染对应的内容 */}
            <div style={{ marginTop: '2rem' }}>
                {displayContent}
            </div>
        </div>
    );
}

export default App;

关键修改点说明： #

1. 引入并使用useState：创建displayContent状态变量来保存要显示的JSX内容，setDisplayContent用来更新这个状态。
2. 修改事件处理函数：不再返回JSX，而是调用setDisplayContent更新状态。
3. 添加内容渲染区域：在组件返回的JSX中，添加一个区域来渲染displayContent的内容，当状态更新时，React会自动重新渲染这个区域，展示对应的消息。

内容的提问来源于stack exchange，提问作者Tennis Smith