javascript 为什么react不显示“你好”或“再见”消息？

a64a0gku 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(118)

这将创建一个带有单个按钮的页面。该按钮有2个选项。我希望它在按下时返回“hello world”或“goodbye world”。但它不起作用。我无法在调用时显示“hello”或“goodbye”消息。
以下是调用菜单项时的屏幕外观：

下面是代码：

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;

我做错了什么？

JavaScript

来源：https://stackoverflow.com/questions/76038539/why-is-react-not-displaying-hello-or-goodbye-messages

1条答案

按热度按时间

3yhwsihp1#

onClick将一个函数绑定到一个事件，就像addEventListener一样，因此在其中返回JSX没有任何意义。

可能的解决方案

const [displayValue, setDisplayValue] = useState(<h1>Good Morning World</h1>);

const setDisplayHello = () => {
   setDisplayValue(<h1>Hello World</h1>);
}

return (
   <div onClick={setDisplayHello}>
     {displayValue}
   </div>
)

你可以这样做，但我不会在react状态下存储JSX，你可以只存储一个字符串，而不是像这样：

const [displayValue, setDisplayValue] = useState('Good Morning World');

const setDisplayHello = () => {
   setDisplayValue('Hello World');
}

return (
   <div onClick={setDisplayHello}>
     <h1>{displayValue}</h1>
   </div>
)

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 为什么react不显示“你好”或“再见”消息？

1条答案

相关问题

热门标签

最新问答