错误JSX，我无法理解

Question

我想从按钮的单击事件执行一个简单的指令，但它向我表明了很多错误，我无法理解这个问题。我试着按照React网站指南中解释的那样做，但无论如何都不好。下面是代码。你能帮我吗?语法真的错了吗?

错误是(它是用意大利语写的，这是我的语言):[{"resource"c://用户/Alberto/桌面/MeteorProject/myApp//ui/App.jsx"进口,"称:"typescript"code"1005";"severity" 8message": "È previsto '，'.";"source"ts"startLineNumber" 5"startColumn" 9,"endLineNumber" 5"endColumn" 14}]

export const App = () => (
  const click = () => (
    let message = 'Ciao come stai?',
    return(
      <b>{message}</b>
    )
  ),
  <div>
    <h1>Welcome to Meteor!</h1>
    <button onClick={click}>Clicca</button>
  </div>
);

Answer 1

这里有几个问题:

• 您的click函数不能返回内容;点击函数的返回值根本没有被使用。
• 您试图使用App的简洁形式的箭头函数，但是您在主体(const click = ___)中有一个语句。简洁的形式只能有表达式，不能有语句。使用完整的函数体形式(=>后面有一个{)。

如果您的目标是在单击按钮时更改消息，将消息置于状态并从单击处理程序更新状态:

const { useState } = React;
/*export*/ const App = () => { // <== Need full function body, we have statements in it
    // Start with the initial state
    const [message, setMessage] = useState("Welcome to Meteor!");
    const click = () => { // <=== This *could* use (), but using a full body makes it easier to add later
        // Update state
        setMessage("Ciao come stai?");
    };
    return (
        <div>
            {/* Show the current value of `message` */}
            <h1>{message}</h1>
            <button onClick={click}>Clicca</button>
        </div>
    );
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

---

在上面，我坚持使用简单的文本(尤其是因为h1元素的通常样式会使b在h1中不做任何事情)，但是也可以将React元素存储在状态中。这样做是不寻常的，但可能的:

const { useState } = React;
/*export*/ const App = () => { // <== Need full function body, we have statements in it
    // Start with the initial state
    const [message, setMessage] = useState("Welcome to Meteor!");
    const click = () => { // <=== This *could* use (), but using a full body makes it easier to add later
        // Update state with a React element
        setMessage(<b>Ciao come stai?</b>);
    };
    return (
        <div>
            {/* Show the current value of `message` */}
            {/* Used a `div` instead of `h1` so you could see the boldface */}
            <div>{message}</div>
            <button onClick={click}>Clicca</button>
        </div>
    );
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Answer 2

请尝试此代码

export const App = () => {
const [btnClicked,setIsBtnClicked] = useState(false)
let message = 'Ciao come stai?'
return (
  <div>
    <h1>Welcome to Meteor!</h1>
    <button onClick={() =>setIsBtnClicked(!btnClicked) }>Clicca</button>
    {btnClicked && <b>{message}</b>}
  </div>
  )
}