Javascript 如何将滚动条添加到react组件？

我有一个这样的应用程序
我想在左边的部分添加一个滚动条，而不是整个页面。滚动左侧，保持右侧固定。这是我的密码

function LeftContent(props) {
const { getRef, onHandleNextButton, onHandleStopRecording, ...restProps } = props;
const matches = useMediaQuery('(max-width:800px)');
const items = [...Array(15)].map((val, i) => `Item ${i}`);
return (
    <Box width={matches ? "100%" : "35%"} flex={1} bgcolor={grey[200]} boxShadow="2px 0px 4px lightgrey" zIndex={1} display="flex" flexDirection="column" overflow-y="scroll">
        <QuestionTrackerBox
            {...restProps}
        />
        <ul>
            {items.map((item, i) => (<li key={`item_${i}`}>{ item }</li>))}
        </ul>
        <div overflow-y="scroll">
        {!matches && <RecordedQuestionsList
            {...restProps}
        />}
        {matches && <VideoInterviewBox
            getRef={(node) => getRef(node)}
            {...restProps}
        />}
        <QuestionInformationBox
            onHandleNextButton={onHandleNextButton}
            onHandleStopRecording={onHandleStopRecording}
            {...restProps}
        />
        </div>
    </Box>
)}

function RightContent(props) {
const { getRef, ...restProps } = props;
const matches = useMediaQuery('(max-width:800px)');
if (matches) return null;
return (
    <VideoInterviewBox
        getRef={(node) => getRef(node)}
        {...restProps}
    />
)}    

函数LeftContent（道具）{
const{getRef，onHandleNextButton，onhandlestorecording，…restProps}=props；
const matches=useMediaQuery（‘（最大宽度：800px）’）；
常量items=[…数组（15）].map（（val，i）=>`Item${i}`）；
返回(

{items.map（（item，i）=>（
{item}
））

{！匹配&}
{matches&&getRef（节点）}
{…restProps}
/>}
)}
功能内容（道具）{
const{getRef，…restProps}=props；
const matches=useMediaQuery（‘（最大宽度：800px）’）；
如果（匹配）返回null；
返回(
getRef（节点）}
{…restProps}
/>
)}    

---

我需要做哪些更改？

您可以使用css样式来完成此操作，如果您在可滚动元素上设置了

overflow-y:scroll

，您可以获得一个滚动条，但只有当元素“overflows”时，也就是当元素的内容不再适合滚动条时，才可以添加滚动条

<div style={{overflowY:"scroll"}}>
</div>

添加这些css用于

  <style>
 div.ex1 {
  width: 200pxpx;
  height: 200px;
  overflow: scroll;
 }
</style>

第ex1分部{
宽度：200px；
高度：200px；
溢出：滚动；
}

overflow-y

不是有效的html属性。这将是css。相关：