當我嘗試添加另一個反應時返回錯誤JSX Expressions must have one parent element。我不明白為什么這是因為它有一個父元素。 return (<div className="loginButton"> <header className="loginButton"> <button className='discordLogin' id='login' href="link-here"></button> </header></div><div className="App"> <header className="App-header"> <img key={speed} src={logo} style={animationStyle} className="App-logo-circle" id='spinnerLogo' alt="Spinning logo" /> <p>Hello, and welcome to the begining of the Swiss Plus Website. <strong>We hope you enjoy your stay</strong> </p> <button className='App-button' id='fastLogoButton' onClick={faster}>Increase Spin Speed!</button> <button className='App-button' id='slowLogoButton' onClick={slower}>Decrease Spin Speed!</button> </header></div> );附言。錯誤發生在返回的 ) 處。
3 回答
牧羊人nacy
TA貢獻1862條經驗 獲得超7個贊
您出現此錯誤是因為您同時返回兩個元素。您的兩個 div 都需要包裝在父元素中。
您可以使用React.Fragment來執行此操作。
React.Fragment 組件允許您在 render() 方法中返回多個元素，而無需創建額外的 DOM 元素
冉冉說
TA貢獻1877條經驗 獲得超1個贊
return(
<React.Fragment>
<div className="loginButton">
<header className="loginButton">
<button className='discordLogin' id='login'
href="link-here"></button>
</header>
</div>
<div className="App">
<header className="App-header">
<img key={speed} src={logo} style={animationStyle} className="App-logo-circle"
id='spinnerLogo'
alt="Spinning logo"
/>
<p>Hello, and welcome to the begining of the Swiss Plus Website. <strong>We hope
you enjoy your stay</strong>
</p>
<button className='App-button' id='fastLogoButton' onClick={faster}>
Increase Spin Speed!
</button>
<button className='App-button' id='slowLogoButton' onClick={slower}>
Decrease SpinSpeed!
</button>
</header>
</div>
</React.Fragment>
);
慕碼人8056858
TA貢獻1803條經驗 獲得超6個贊
React 組件要求您僅返回一個元素。React 中的一個常見模式是組件返回多個元素。片段允許您對子級列表進行分組，而無需向 DOM 添加額外的節點。
? return (
? ? <React.Fragment>
? ? ? <ChildA />
? ? ? <ChildB />
? ? ? <ChildC />
? ? </React.Fragment>
? );
通常這些元素被包裝在例如 div 內。在大多數情況下，包裝器 div 是“不相關的”，只是因為 React 組件要求您僅返回一個元素而添加。
- 3 回答
- 0 關注
- 211 瀏覽
添加回答
舉報
0/150
提交
取消