反应：在特定情况下，在 Div 上设置 scrollTop 不起作用

Question

从今天早上开始，我就一直在做这件事，我仍然不知道哪里出了问题。我想突出显示文本区域输入类型中的文本。我知道这是不可能的，但我找到了一个聪明的解决方案来欺骗观众。这是文章的链接，这是项目的codeio笔的链接。

我一直在尝试使用react和普通javascript重新创建相同的属性，但带有className高亮显示的div的scrollTop属性不起作用。如果有人能帮我调试我做错了什么，那就太好了！

class CodeTextArea extends React.Component {
constructor(props){
super(props);
this.state = {scrollTop: 0, 
scrollLeft: 0
};
this.setScroll = this.setScroll.bind(this);
}
setScroll(top,left){
this.setState({scrollTop: top, scrollLeft: left});
}
render(){
return(
<div class="container">
<div class="backdrop">
<Highlight scrollTop={this.state.scrollTop} scrollLeft={this.state.scrollLeft}/>
</div>
<Textarea setScrollTop={this.setScroll}/>
</div>
);
}
}
class Highlight extends React.Component {
constructor(props){
super(props);
this.divRef = React.createRef();
}
componentDidUpdate(prevProps){
if (this.props.scrollTop !== prevProps.scrollTop) {
/*console.log(this.divRef.current);
console.log(this.props.scrollTop);
console.log(this.props.scrollLeft);*/
this.divRef.current.scrollTop = this.props.scrollTop;
}
}
render(){       
return (
<div class="highlights" ref={this.divRef}><mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>
);
}
}
class TogglePerspective extends React.Component {
constructor(props){
super(props);
this.clickHandler = this.clickHandler.bind(this);
this.buttonRef = React.createRef();
}
clickHandler(){
}
render(){
return (
<button onClick={this.clickHandler} ref={this.buttonRef}>Toggle Perspective</button>
);
}
}
class Textarea extends React.Component {
constructor(props){
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.handleChange = this.handleChange.bind(this);
this.applyHighlights = this.applyHighlights.bind(this);
this.textareaRef = React.createRef();
this.state = {value: 'This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.'};
}
applyHighlights(text){
return text
.replace(/n$/g, 'nn')
.replace(/[A-Z].*?b/g, '<mark>$&</mark>');
}
handleScroll(){
let scrollTop = this.textareaRef.current.scrollTop;
let scrollLeft = this.textareaRef.current.scrollLeft;
this.props.setScrollTop(scrollTop,scrollLeft);
}
handleChange(event){
let textareaValue = event.targrt.value;
this.setState({value: textareaValue});
let highlightedText = this.applyHighlights(textareaValue);
}
render(){
return (
<textarea ref={this.textareaRef} value={this.state.value} onChange={this.handleChange} onScroll={this.handleScroll}></textarea>
);
}
}
class Editor extends React.Component {
render(){
return (
<div>
<CodeTextArea />
<TogglePerspective />
</div>
);
}
}
ReactDOM.render(
<Editor />,
document.getElementById('root')
);

这是我消遣的密码笔。请告诉我为什么高亮显示类div scrollTop属性不起作用。我通常不会在这里发布长代码，除非我真的很沮丧，所以任何帮助都很感激。

Answer 1

看起来scrollTop属性是在div.highlights上设置的，而应该在div.backdrop上设置。

将div.backdrop移到Highlight组件中，并将ref放在该元素上：

<div class="backdrop" ref={this.divRef}>
<div class="highlights">
<mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>.
Alright, that's a lie. You can't actually render markup inside a textarea. However, you can 
fake it by carefully positioning a div behind the textarea and adding your highlight markup there. 
JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. 
Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>