-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
컴포넌트에 ref 달기가 정확히 동작하지 않네요. 답변 부탁 드려요
19.03.19 18:51 작성 조회수 111
0
강사님꼐서 쓰신"리액트를 다루는 기술" 이란 책도 사서 따라 해보고 있는데 잘 안되는 부분이 있어 글 올립니다. - 5.3 검포넌트에 ref 달기
[ ScrollBo.js ]
import React, { Component } from 'react';
class ScrollBox extends Component {
scrollToBottom = () => {
const { scrollHegiht, clientHeight } = this.box;
console.log("scrollHegiht : " + scrollHegiht);
console.log("clientHeight : " + clientHeight);
this.box.scrollTop = scrollHegiht - clientHeight;
}
render() {
const style = {
border : '1px solid black',
height : '300px',
width : '300px',
overflow : 'auto',
position : 'relative'
}
const innerStyle = {
width : '100%',
height : '650px',
background : 'linear-gradient(white, black)'
}
return (
<div
style={style}
ref={(ref) => {this.box=ref}}>
);}
export default ScrollBox;
[App.js]
import React, { Component } from 'react';
import ScrollBox from './ScrollBox';
class App extends Component {
render() {
return (
this.scrollBox=ref} />
this.scrollBox.scrollToBottom()}>
맨 밑으로
}
);
}
}
export default App;
위 2개의 js를 만들어서 실행하면 "맨밑으로" 버튼을 누르면 스크롤바가 내려가지 않습니다.
제가 어떤 부분을 코딩을 잘 못 한 건 가요?
답변을 작성해보세요.
답변 0