-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
강의보고 아무리 따라쳐도 안될것임.
22.08.02 21:44 작성 조회수 861
0
/**/
import React from "react";
const styles = {
wrapper: {
margin : 9,
padding : 9,
display : "flex",
flexDirection: "row",
border: "1px solid grey",
borderRadius : 15
},
messageText: {
color: "black"
,fontSize : 15
},
};
class Notification extends React.Component{
constructor(props){
super(props);
this.setState = {};
}
render(){
return(
<div style={styles.wrapper}>
<span style={styles.messageText}>{this.props.message}</span>
</div>
);
}
}
export default Notification;
/**/
import React from "react";
import Notification from "./Notification"
const reservedNotifications = [
{
message : "안녕하세요, 오늘 일정을 알려드립니다.",
},
{
message : "안녕하세요, 오늘 점심을 알려드립니다.",
},
{
message : "안녕하세요, 오늘 저녁을 알려드립니다.",
},
];
var timer ;
class NotificationList extends React.Component{
constructor(props){
super(props)
this.state = {
notificationarr : [{
message : "안녕하세요 ."
}] ,
}
}
componentDidMount(){
const { notificationarr } = this.state;
timer = setInterval(() => {
if(notificationarr && notificationarr.length < reservedNotifications.length){
const index = notificationarr.length;
console.log(index);
notificationarr.push(reservedNotifications[index]);
this.setState({
notification: notificationarr,
});
}else{
clearInterval(timer);
return;
}
}, 1000);
}
render() {
return(
<div>
{ this.state.notificationarr.map((notification) => {
return<Notification message={notification.message} />
})}
</div>
);
}
}
export default NotificationList
답변을 작성해보세요.
0
0
0
0
S J
질문자2022.08.02
import NotificationList from './chapter_06/NotificationList';
import React from 'react';
import * as ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<NotificationList />);
reportWebVitals();
답변 4