Next/React - 循环（每 125 个数据长度添加 1 行

Question

下面代码的目标是根据提取数据的长度循环文本区域的大小。

{
  logData.description.length < 125 ? (
    <>
      <FormControl
        id='descriptionFormID'
        ref={textAreaRef}
        value={logData.description}
        as='textarea'
        rows={1}
        placeholder='Comment'
        className='mr-sm-2 bg-white'
        disabled
      />
    </>
  ) : (
    <></>
  );
}
{
  logData.description.length > 125 && logData.description.length < 250 ? (
    <>
      <FormControl
        id='descriptionFormID'
        ref={textAreaRef}
        value={logData.description}
        as='textarea'
        rows={2}
        placeholder='Comment'
        className='mr-sm-2 bg-white'
        disabled
      />
    </>
  ) : (
    <></>
  );
}

我每 125 长度添加 1 行。

示例：

1 行 = 125 个字符
2 行 = 250 个字符

Answer 1

您可以使用 Math.ceil(logData.description.length/125) 得到一个整数，描述数据的长度每增加 125 就增加 1，然后只需将该数字插入您的行。

<>
  <FormControl 
    id="descriptionFormID"
    ref={textAreaRef}
    value={logData.description}
    as="textarea"
    rows={Math.ceil(logData.description.length/125)} 
    placeholder="Comment" 
    className="mr-sm-2 bg-white"
    disabled/>
</>

Next/React - 循环（每 125 个数据长度添加 1 行

Next/React - Loop (add 1 row per 125 data length

reactjs

next.js