创建接收包含属性“消息”的“道具”的 React 组件答案

【问题标题】：Create React component that receive "props" that contains attribute "message"创建接收包含属性“消息”的“道具”的 React 组件
【发布时间】：2022-01-03 06:34:45
【问题描述】：

我正在尝试创建一个接收包含属性消息的道具的 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')
);

这是应用程序的工作方式： https://imgur.com/a/1LaQitZ 我不确定如何继续。

【问题讨论】：

只需使用 {props.message.length

标签： javascript html reactjs react-native

【解决方案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）。

【讨论】：

【解决方案2】：

所以你可以通过两种方式来做这件事

使用 If else

<div className="App">
      {
          if(props.message.length > 10){
               return "Too Long"
          }else{
               return props.message
          }

      }
    </div>

使用三元运算符

 {props.message.length > 10 ? 'Too Long': props.message}

【讨论】：