javascript - 创建接收包含属性 "props"的 "message"的 React 组件

Question

我正在尝试创建一个接收包含属性消息的 props 的 React 组件。如果消息值的长度大于 10，则组件将呈现文本“太长”。否则将呈现消息值。

我的App.js代码:

import React from 'react';
import './App.css';

function App(props) {
  return (
    <div className="App">
      {props.message}
    </div>
  );
}

export default App;

index.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')
);

应用程序应该是这样工作的: /image/uWD6S.jpg 我不知道如何继续。

Answer 1

我会这样做:

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;

只需使用三元运算符有条件地呈现 props.message 值或字符串 'Too long'(如果其长度大于 10)。