//tips
//smart contract
ドキュメントごとのBoard表示方法の模索。現状全てのメッセージ内容を抜き出して表示させることはできたのでindexに応じて表示を替えるように設計する。
Indexを格納し、その数値が異なった場合に分岐するようにできるか考える。
問題なのはblocks.map((item,index) => ( と item.map((i,index)=>(の間にタグを入れられないこと。これにより切り替えが難しい。
return (
<div >
{blocks.map((item,index) => (
item.map((i,index)=>(
<div key={index} >
<Card>
{i}
</Card>
</div>
))
))}
</div>
)
};
この段階まで分割できているのでindex0の時の[0][1]…などととれれば良い。
0: (2) ['naki:ららら', 'nak:あああ']
1: (2) ['naki:hi', 'nak:great']
returnの外で対応するか。
returnで返したいoutputは
<div>
<div><card></card></div>
<div><card></card></div>
</div>
の形。
なので下記の形にできるようにblocksの方を加工してあげる必要がある。
return (
<div >
{blocks.map((item,index) => (
<div key={index} >
<Card>
{item}
</Card>
</div>
))}
</div>
)
{item} の中に入れたい塊は
<div>naki:ららら</div>
<div>nak:あああ</div>
などとされたセット。
items.pushを元のitems.push(<div >{ item[i].text[s].username }:{ item[i].text[s].chat }</div>)に戻す。
こちらにて無事に分割対応できた。
var rap = () => {
const items = [];
//const blocks = [];
for (let i = 0; i <item.length; i++) {
console.log('item[i]')
console.log(item[i])
console.log(item.length)
for (let s = 0; s <item[i].text.length; s++) {
console.log('item[i].text[s]')
console.log(item[i].text[s])
items.push(<div >{ item[i].text[s].username }:{ item[i].text[s].chat }</div>)
//items.push(item[i].text[s].username+":"+item[i].text[s].chat)
}
console.log("items0")
console.log(items)
blocks.push(items)
items = []
console.log("items")
console.log(items)
console.log(blocks)
}
//vroop(blocks)
//return <div >{ items }</div>;
return (
<div >
{blocks.map((item,index) => (
<div key={index} >
<Card>
{item}
</Card>
</div>
))}
</div>
)
};
Cardの表示を加工し、cardごとに別の形に見せられるように変更を加えていく。
Boardedit({item}) {のなかにmakestyleを組み込んでいく。
まずはCardに枠線をつけたい。
<Card sx={{ border: 1 }}> にて適応できた。
次に表示範囲を左右一杯ではなく、三等分づつで横にバラけるようにしたい。
return (
<div >
{blocks.map((item,index) => (
<div key={index} >
<div className={classes.balancer}>
<Grid item xs={12} md={6} lg={4} key={index} >
<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>
</div>
</div>
))}
</div>
const useStyles=makeStyles({で下記を導入。
balancer:{
display:'flex',
},
Gridを導入。なかなか横に並ばない。どうしたもんか
return (
<div >
<Grid item xs={12} md={12} lg={12} className={classes.balancer}>
{blocks.map((item,index) => (
<div key={index} >
<Grid item xs={12} md={6} lg={4} >
<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>
</div>
))}
</Grid>
</div>
)
};
横に並べることはできても表示がおかしいのは却下なので、ブラウザの検証からコンパイル済みのコードを読みどうなっているのかを確認。
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12 MuiExample_Component-balancer css-1idn90j-MuiGrid-root">
ここまでは横幅マックスで取れている。
<div>
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 MuiGrid-grid-lg-4 css-1e6jbaj-MuiGrid-root">
<div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-i8d1a0-MuiPaper-root-MuiCard-root">
<div>naki:ららら</div>
<div>nak:あああ</div>
</div></div></div><div>
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 MuiGrid-grid-lg-4 css-1e6jbaj-MuiGrid-root">
<div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-i8d1a0-MuiPaper-root-MuiCard-root">
<div>naki:hi</div><div>nak:great</div></div></div></div></div>
Gridの分割割合のしては逆効果のようなので外す。
<div >
<Grid item xs={12} md={12} lg={12} className={classes.balancer}>
{blocks.map((item,index) => (
<div key={index} >
<Grid >
<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>
</div>
こうするとCardがそのそも保有している横幅に合わせて表示された。
ついに下記の形でスッキリと表示させることができた。<div>が邪魔になっていたよう。
<div >
<Grid className={classes.balancer}>
{blocks.map((item,index) => (
// <div key={index} >
<Grid item xs={12} md={6} lg={3} key={index}>
<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>
// </div>
))}
</Grid>
</div>
このBordの情報にtitle情報も組み込めるようにする。
Indexがドキュメントブロック単位に分かれているので 大元の引数itemをxitemに入れたものから抽出した。
{blocks.map((item,index) => (
<Grid item xs={12} md={6} lg={3} key={index}>
<Card sx={{ border: 1 }}>
{xitem[index].title}
作成タイミングのitemスタンプの追加とボードのタイトルとタイトル内容の記述を表示させ、それをクリックしたら各メッセージ内容に飛ぶようにする。
５ちゃんねるの構成がシンプルで良い。見本にする。誰に対するreplyなのかも指定できるようにしてあげる必要がありそう。
