js reactjs 写一个展现层划出动画高度根据内容自动调整

以下是一个基本的React组件，展现层会根据内容自动调整高度，并且在每次内容变化时都会划出动画：

import React, { useState, useEffect, useRef } from 'react';
import './App.css';

function App() {
  const [content, setContent] = useState('');
  const [height, setHeight] = useState(0);
  const contentRef = useRef(null);

  useEffect(() => {
    // 获取内容高度
    const contentHeight = contentRef.current.scrollHeight;
    setHeight(contentHeight);
  }, [content]);

  const handleContentChange = (event) => {
    setContent(event.target.value);
  };

  return (
    <div className="App">
      <textarea
        ref={contentRef}
        value={content}
        onChange={handleContentChange}
        style={{ height: height }}
      />
    </div>
  );
}

export default App;

在上面的代码中，我们使用了React的useState hook来跟踪content和height的状态。content存储文本框中的内容，height存储文本框的高度。我们还使用了useRef hook来引用文本框元素，以便在组件挂载时获取其高度。

我们使用了useEffect hook来在每次content变化时获取文本框的高度，并将其存储在height状态中。我们还将contentRef传递给了文本框，以便可以通过scrollHeight属性获取文本框的高度。

在textarea元素中，我们将height设置为文本框的高度，这意味着它会自动调整大小以适应内容。我们还将content和handleContentChange绑定到文本框上，以便可以响应用户的输入。

最后，如果你想要添加动画，你可以使用CSS过渡或动画来为文本框添加动画效果