在 React JS 中通过函数渲染组件的一部分

Question

我正在学习 reactJS，但遇到了一个问题。我制作了一个带有文本 ('Online') 的组件。我从 props 收到 Online as true/false 的状态。但是我想对组件的一部分（而不是整个组件）进行更改。就像这里我想更改 'online' 文本后使用的图标 CircleFill 的颜色。

我写了下面的代码，但不知道如何return那个小段？

import React,{useState} from 'react';
import { Row,Alert } from 'react-bootstrap';
import {BarChartFill, CircleFill } from 'react-bootstrap-icons';

const TitleHeadComponent = (props) => {

const [isNow, setisNow] = useState(props.isOnline);

function circleColor(isNow) {
    if(isNow === true) {
        //return  a circle of GREEN color after `Online :' below
    }
    else {
       //return  a circle of RED color after `Online :' below
    }
}

return (
    <Alert variant={'success'}>
     <Row className="followerRow">
         <BarChartFill size={26} color='black' /><br/><b>Online:{props.isOnline} </b>
         
        {/* if Online:true => <CircleFill color='green' />
        else if Online:false => <CircleFill color='red' /> */}
        

     </Row>
    </Alert>
 );
};

export default TitleHeadComponent;

Answer 1

就这样更新：

function circleColor(isNow) {
  if(isNow === true) {
      return <CircleFill color='green' />
  }
  else {
     return <CircleFill color='red' />
  }
}

return (
  <Alert variant={'success'}>
   <Row className="followerRow">
       <BarChartFill size={26} color='black' /><br/><b>Online:{props.isOnline} </b>
       
      {circleColor(props.isOnline)}
      

   </Row>
  </Alert>
);

或者你可以这样写：

function circleColor(isNow) {
  return <CircleFill color={isNow ? 'green' : 'red'} />
}

Answer 2

考虑仅 return 从函数中获取颜色字符串，并使用该 return 值作为传递渲染组件的道具：

function circleColor(isNow) {
  if (isNow) {
    return "green";
  }
  return "red";
}

return (
  <Alert variant={"success"}>
    <Row className="followerRow">
      <BarChartFill size={26} color="black" />
      <br />
      <b>Online:{props.isOnline} </b>
      <CircleFill color={circleColor(props.isOnline)} />
    </Row>
  </Alert>
);

在 React JS 中通过函数渲染组件的一部分

Rendering a part of component through function in react JS

reactjs

react-hooks

conditional-statements

react-component