问：

我想要实现的目标

1. 让所有这些组件共享相同的样式。<textarea/>height
2. 如果元素的任何高度样式发生更改，则同一行中的所有元素都应具有相同的高度。<textarea/>textareas

当前工作解决方案

父组件

通过让所有子组件共享状态来提升状态。

const TableRow = (props: TableRowProps) => {
  const [textAreaHeight, setTextAreaHeight] = useState<string>("100%");

  console.log("parent render");

  return (
    <tr>
      {props.currentRow.cells.map((rowValue) => (
        <DynamicCellTextArea
          key={rowValue.id}
          currentRow={rowValue}
          height={textAreaHeight}
          setHeight={setTextAreaHeight}
        />
      ))}
    </tr>
  );
};

子组件

通过使用 MutationObserver 检查 <textarea/> 元素的样式是否更改，我们将设置状态（高度）变量，以便它反映到整行中的所有 <textarea/> 元素。

const DynamicCellTextArea = (props: DynamicCellTextAreaProps) => {
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (textareaRef.current === null) {
      return;
    }

    textareaRef.current.style.minWidth = "100%";
    textareaRef.current.style.minHeight = "100%";
    textareaRef.current.style.height = props.height;

    const mutationObserver = new MutationObserver(() => {
      // set the height here so that child components (on the same row)
      // can have a shared height style (on state)
      props.setHeight(textareaRef.current?.style.height as string);
    });

    mutationObserver.observe(textareaRef.current, {
      attributes: true,
      attributeFilter: ["style"],
    });
  }, [props]);

  return (
    <td className="h-px border border-red-400 overflow">
      <div className="flex w-full h-full">
        <textarea
          ref={textareaRef}
          rows={1}
          className="w-full px-3 py-2 bg-red-500 resize"
        />
      </div>
    </td>
  );
}

我的解决方案的性能问题

渲染不流畅，特别是如果我的表格中有多个列和行（因为它将是动态的）。我不确定如何优化这样的东西。我试图捕获 textarea 元素的调整大小（使用 和 ），然后计划在这些事件上。但我似乎做不到。onResizeonResizeCaptureset the state

完整代码：https://github.com/paraJdox/table-rows-with-textarea-cells