我正在嘗試創建一個接收包含屬性訊息的道具的 React 組件。如果訊息值的長度大于 10，則組件呈現文本“太長”。否則呈現訊息值。
我的 App.js 代碼：
import React from 'react';
import './App.css';
function App(props) {
return (
<div className="App">
{props.message}
</div>
);
}
export default App;
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App message="Hello World"/>
</React.StrictMode>,
document.getElementById('root')
);
這是應用程式的作業方式：https : //imgur.com/a/1LaQitZ 我不知道如何繼續。
uj5u.com熱心網友回復：
我會這樣做：
import React from 'react';
import './App.css';
function App(props) {
return (
<div className="App">
{props.message.length > 10 ? 'Too long' : props.message}
</div>
);
}
export default App;
如果長度大于 10，只需使用三元運算子有條件地呈現props.message值或字串'Too long'。
uj5u.com熱心網友回復：
所以你可以通過兩種方式來做這件事
- 使用如果其他
<div className="App">
{
if(props.message.length > 10){
return "Too Long"
}else{
return props.message
}
}
</div>
- 使用三元運算子
{props.message.length > 10 ? 'Too Long': props.message}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/402038.html
標籤：javascript html 反应 反应原生
上一篇：更改按鈕的id導致點擊事件觸發