ScrollToBottom函数在React钩子reactjs中不工作

下面的类方法ScrollMessageasMessages正在被追加，并且工作正常

class App extends React.Component {
  constructor(props) {
    super(props);
//const messagesEndRef = React.createRef();
//const el = React.createRef();

this.el = React.createRef();
    this.state = {
message: '',
messages: [],
};

  }

  handleSubmit(event) {
    event.preventDefault();
const message = 'Hello everyone';

// messages concat goes here
 this.scrollToBottom();

  }

scrollToBottom() { 
this.el.scrollIntoView({ behavior: "smooth" });
}
  render() {

    return (
      <div>
        <div className="">
 {this.state.messages.map((e, i) => (
              <div key={i}>
        
<div"> {e.message}</div> 
<div ref={el => { this.el = el; }} ></div>

              </div>
            ))}
       
        </div>

<div>
 <form onSubmit={this.handleSubmit}>
        <input type="submit" value="Submit" />
      </form>
</div>


      </div>
    );
  }
}

我认为这个错误是由函数scrollToBottom（）引起的

function App() {
const el = React.createRef();
const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);


  function handleSubmit(event) {
    event.preventDefault();
const message = 'Hello everyone';

// messages concat goes here
scrollToBottom();

  }

function scrollToBottom() { 
el.scrollIntoView({ behavior: "smooth" });
}


    return (
      <div>
        <div className="">
 {messages.map((e, i) => (
              <div key={i}>
        
<div"> {e.message}</div> 
<div ref={el => {el = el; }} ></div>

              </div>
            ))}
       
        </div>

<div>
 <form onSubmit={this.handleSubmit}>
        <input type="submit" value="Submit" />
      </form>
</div>


      </div>
    );
}

函数应用程序（）{
const el=React.createRef（）；
const[message，setMessage]=useState（“”）；
const[messages，setMessages]=useState（[]）；
函数handleSubmit（事件）{
event.preventDefault（）；
const message='大家好'；
//康卡特在这里留言
scrollToBottom（）；
}
函数scrollToBottom（）{
el.scrollIntoView（{行为：“平滑”}）；
}
返回(
{messages.map（（e，i）=>(
首先，您需要将
el.scrollIntoView（）
调用更改为：

el.current.scrollIntoView()

其次，将ref从函数更改为赋值-不能将值重新赋值给常量变量（el），因此我不确定函数ref最初是如何编译的

最后，对于钩子，您应该使用
useRef
而不是
createRef
：

const el = useRef(null);

/** -- snip -- **/

<div ref={el} ></div>

const el=useRef（null）；
/**--剪断--**/

请在此处阅读更多信息：
首先，您需要将
el.scrollIntoView（）
调用更改为：

el.current.scrollIntoView()

其次，将ref从函数更改为赋值-不能将值重新赋值给常量变量（el），因此我不确定函数ref最初是如何编译的

最后，对于钩子，您应该使用
useRef
而不是
createRef
：

const el = useRef(null);

/** -- snip -- **/

<div ref={el} ></div>

const el=useRef（null）；
/**--剪断--**/

阅读更多信息：
感谢您的回复。正如您所说，我已经回答了，但仍然存在上面指出的错误。
el.scrollIntoView不是一个函数scrollToBottom@https：//localhost:9000/
您是否尝试了el.current.scrollIntoView谢谢您的响应。正如您所说，我已经完成了，但仍然存在上面指出的错误。
el.scrollIntoView是n函数scrollToBottom@https：//localhost:9000/
您是否尝试了el.current.scrollIntoView