[2番目の項目]詳細画面仕様-1
1.機能と画面
1.1. 機能
クリックしたラベルはborder colorを変更し、対応するラベルには対応する情報が表示されます.
1.2. 画面
2.コードと問題
2.1. コード#コード#
const [isClicked, setIsClicked] = useState(0);
const onListClick = (e, input) => {
setIsClicked(e.target.value);
}; <MovieInfoList onClick={onListClick}>
{movieInfoList.map((item, index) => {
return isClicked === index ? (
<MovieInfoClicked value={index} key={index}>
{item}
</MovieInfoClicked>
) : (
<MovieInfo value={index} key={index}>
{item}
</MovieInfo>
);
})}
</MovieInfoList>const movieInfoList = ['주요정보', '실관람평'];
const MovieInfoClicked = styled.li`
display: inline-block;
width: 50%;
text-align: center;
padding: 5px 0;
cursor: pointer;
border: 1px solid #503396;
border-bottom: 0;
`;
const MovieInfo = styled.li`
display: inline-block;
width: 50%;
border-top: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #503396;
text-align: center;
padding: 5px 0;
cursor: pointer;
`;3.尊敬
Detailsに宣言されたonClick関数をDetailTabListのインラインイベントとして追加します.isClickedをtarget valueとしてクリックするだけなので.
liではなくulのサブエレメントをクリックしなかったら?いいえ.なぜなら、liモデリングではwid:25%とheightがサブ要素値に基づいてフローティングするからです.
では、リスト項目が変わらない場合は、キー値の代わりにmapのindexを使ってもいいのではないでしょうか.
リストとアイテムが静的で、計算されているか、または変わらない場合、アイテムとリストにidがない場合、リストアイテムの順序が変更されたり、フィルタリングされていない場合はindexを使用します.
keyをindexとして使用することが問題となるのはlistの長さが変化したりitemの値が更新されたりした場合,反応が以前の値と比較して混同される可能性があるためである.
それでもnanoidでキー値を入力しました.ステップメニューは静的要素ですが、nanoid()をメニューとデータの各idに割り当ててみます.
クリックした構成部品をデフォルトの構成部品とマージします.
<DetailTabList onClick={e => setIsClicked(e.target.value)}>
{movieInfoList.map((item, index) => (
<DetailTab
isClicked={isClicked === item.idx}
value={index}
key={item.id}
>
{item.title}
</DetailTab>
))}
</DetailTabList>
{movieInfodataList.map(item => (
<DetailsInfoWrapper key={item.id} display={isClicked === item.idx}>
{item.contents}
</DetailsInfoWrapper>
))}
const DetailTab = styled.li`
display: inline-block;
width: 50%;
text-align: center;
padding: 5px 0;
cursor: pointer;
border-style: solid;
border-width: 1px 1px ${props => (props.isClicked ? '0' : '1px')} 1px;
border-top-color: ${props => (props.isClicked ? '#503396' : '#ebebeb')};
border-right-color: ${props => (props.isClicked ? '#503396' : '#ebebeb')};
border-bottom-color: ${props => (props.isClicked ? '#ebebeb' : '#503396')};
border-left-color: ${props => (props.isClicked ? '#503396' : '#ebebeb')};
`;4.感じ
種目をしていた時、地面でボールを突き、頭を打ち破るのが好きだったので、盲目的に和弦を打った.私が受け取った感じもいいですが、効率はもっと重要なようです.これからは忙しくても書類をよく見なければなりません.
詳細画面部分はレイアウトと基本クリックイベントの実現のみで、変えるところが本当に多いようです.
5.参考文献
Reference
この問題について([2番目の項目]詳細画面仕様-1), 我々は、より多くの情報をここで見つけました https://velog.io/@hion8800/2차-프로젝트-상세화면-리펙토링-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol