<a href="tel:000-0000-0000">000-0000-0000</a>
import React from 'react';
import './_mainlist.css';
import styled from 'styled-components';
class MainList extends React.Component {
// 렌더링 객체
constructor(props) {
super(props);
this.state = {
ListData: [
{
text: '상품문의',
content: '제목이 출력되겠지요 누르면 답변이 아래로 떨어집니다. 흔히 아코디언UI라고 하지요',
answer: '답변1 다람쥐 헌 쳇바퀴에 돌고파'
},
{
text: '상품문의',
content: '1제목이 출력되겠지요 한줄일때는 이렇게',
answer: '다람쥐 헌 쳇바퀴에 돌고파 다람쥐 헌 쳇바퀴에 돌고파 다람쥐 헌 쳇바퀴에 돌고파 다람쥐 헌 쳇바퀴에 돌고파'
}
]
}
}
render() {
return (
<section>
<dl>
</*map을 이용해서 match rendering*/>
{this.state.ListData.map((list, i) => {
return (
<div>
<ListPrint
key={i}
text={list.text}
content={list.content}
answer={list.answer}
/>
</div>
)
})}
</dl>
</section>
)
}
};
직접적으로 화면에 렌더링 하는 부분
class ListPrint extends React.Component {
constructor(props) {
super(props);
// 기본값 설정
this.state = {
showdd: false,
rotateimg:false
}
this.dtclick = this.dtclick.bind(this)
}
dtclick(e) {
e.preventDefault();
this.setState({
// 토글 하는 부분
showdd:!this.state.showdd,
rotateimg:!this.state.rotateimg
}
)
}
render() {
return (
<div>
<dt onClick={this.dtclick}><span>{this.props.text}</span>{this.props.content}<img src={require('../../img/down.svg')} width="32" height="19" alt="내용확인" className={this.state.rotateimg ? "imgdw": "imgup"}/></dt>
{/*이 부분에 상태 연결*/}
<dd className={this.state.showdd ? "on":"off"}>
{this.props.answer}
</dd>
</div>
)
}
}
` XCOPY` 명령어.
D:\XCOPY D:\code D:\workspace \T \E
D드라이브의 code 폴더의 구조를 D드라이브의 workspace로 폴더만 복사.
네이버에서 지원하는 웨일브라우저 주요 기능 과 설정 정리