Reactjs 不在屏幕上滚动

我在React中写了一个函数。我从一个API调用中获得一些文本信息。我把它保存在一个变量中。然后我使用map将其转换为HTML，并将其显示在网站上，只显示一段文本。但是现在页面没有滚动。有更好的方法吗？还是解决它

import React, {useEffect, useState} from 'react'
import { Link } from "react-router-dom";
import './Log.css'


function NewlineText(props) {
    const text = props.text;
    const newText = text.split('\n').map((str) => <p className="text">{str}</p>);

    return newText;
}

function Log() {
    const [date, setDate] = useState("");
    const [data, setData] = useState("");
    const [status, setStatus] = useState("");
    useEffect (() => {
        fetch('https://www.{api_website_url}.com/api/log').then(res => res.json()).then((result) =>{
            setDate(result.last_modified);
            setData(result.log);
            setStatus(result.status);
        });
    }, []);

    return (
        <div className="page">
            <Link to="/"><button className="button1">
                Home
            </button></Link>
            <div className="logs">
                <NewlineText text={data} />
            </div>
            <br/><br/>
            <p className="text">Date Last Modified: {date}</p>
        </div>
    );
};

export default Log;

import React，{useffect，useState}来自“React”
从“react router dom”导入{Link}；
导入“./Log.css”
函数NewlineText（道具）{
const text=props.text；
const newText=text.split（'\n'）.map（（str）=>
{str}
）；
返回新文本；
}
函数日志（）{
const[date，setDate]=useState（“”）；
const[data，setData]=useState（“”）；
const[status，setStatus]=useState（“”）；
useffect（（）=>{
取（'https://www.{api_website_url}.com/api/log'）。然后（res=>res.json（））。然后（（result）=>{
设置日期（上次修改的结果）；
setData（result.log）；
设置状态（结果状态）；
});
}, []);
返回(
家



上次修改日期：{Date}

);
};
导出默认日志；

或

---

进入换行符函数的数据是什么样子的？您还可以将道具分解为数据，并在一行中返回地图。你能用你传递的数据进行编辑吗？

overflow-y: scroll;

 overflow: scroll;
 white-space: nowrap;