根据 map 函数的值更改 table 行颜色 (React Js)

Question

我正在尝试找出一种方法来根据地图函数中的某些值更改 table 行颜色。我一直在尝试不同的解决方案，如 UseRef 钩子、其他堆栈溢出解决方案等，但没有成功。

         {data.map((item, i) => (
                
                    <Tablerows key={i} >
                    <Tabledata>{item.name}</Tabledata>
                    <Tabledata>{item.place}</Tabledata>               
                    <Tabledata>{dateconvert(item.LOGTIME)}</Tabledata>
                    </Tablerows>
                ))}

现在我在第三列调用一个dateconvert函数将unix时间转换为正常时间

function dateconvert(time_1){
  var date1      = new Date(time_1*1000);
  var convert_1  =('0' + date1.getDate()).slice(-2)      + '/'
           + ('0' + (date1.getMonth()+1)).slice(-2) + '/'
           + date1.getFullYear()                    + ' \xa0\xa0\ '
           + ('0' + date1.getHours()).slice(-2)     + ':'
           + ('0' + date1.getMinutes()).slice(-2)   + ':' 
           + ('0' + date1.getSeconds()).slice(-2);

  return convert_1
  }

到目前为止一切正常！！我得到了想要的输出。

问题：

我希望 table 行在以下条件下显示为红色。（这里的“date”代表我的item.LOGTIME）

  if((Date.now() - date) /(60 * 1000) >11){ 
     
//change colour of the row to red
    }

Answer 1

我想这就是你如何让它工作的。

const data = [
{ name: "brij1", place: "place1", LogTime: "I ignored this for now" },
{ name: "brij2", place: "place2", LogTime: "I ignored this for now" },
];

const DecoratedContainerData = ({ children }) => {
  const styleProps = {
    style: {
      color: "red",
    },
    // any other props here...
  };
  return children(styleProps);
};

const conditionallyDecorateContainerData = (inputDate) => {
  const convertedDate = dateconvert(inputDate);
  const calculatenumber = 11
    //(Date.now() - Date.parse(convertedDate)) / (60 * 1000);
    // Replace 11 with your formula (I have hardcoded this just to check the color style is working. you can also try by replacing 11 with lower or higher number)

  console.log(calculatenumber);
  if (calculatenumber > 11) {
    return (
      <DecoratedContainerData>
        {(props) => <div {...props}>{convertedDate}</div>}
      </DecoratedContainerData>
    );
  }
  return <div>{convertedDate}</div>;
};

{data.map((item, i) => (
  <div key={i}>
    <div>{item.name}</div>
    <div>{item.place}</div>
    {/* One way */}
    <DecoratedContainerData>
      {(props) => <div {...props}>{dateconvert(item.LOGTIME)}</div>}
    </DecoratedContainerData>
    {/* Second Way */}
    {conditionallyDecorateContainerData(item.LOGTIME)}
  </div>
))}

根据 map 函数的值更改 table 行颜色 (React Js)

Changing table row colour based on values from map function ( React Js)

javascript

reactjs

map-function

react-hooks

问题：