自分用のメモ
環境の準備
実行環境
- VS code：v1.62.3
- Node.js：v14.17.3
- React：v17.0.2
プロジェクトの作成
React Create Appで作成します。
React Create Appで作成されたソースの変更
- 15行目でbootstrapをCDNで読み込んでいます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous" >
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
- 14～16行目の子エレメントをmapを使って画面に表示するアプリです。
- 38行目でmapを利用しています。
import React from 'react';
import './App.css';
class App extends React.Component {
input = ''
constructor(props) {
super(props)
}
render() {
return <div>
<h1 className="gb-primary display-4">React</h1>
<div className="container">
<Message title="Children!">
これはコンポーネント内のコンテンツです。
マルでテキストを分割し、リストにして表示します。
改行は必要ありません。
</Message>
</div>
</div>
}
}
class Message extends React.Component {
li = {
fontSize: "14pt",
fontWeight: "bold",
color: "#090"
}
render() {
let content = this.props.children
let arr = content.split('。')
let arr2 = []
for (let i = 0; i < arr.length; i++) {
if (arr[i].trim() != '') {
arr2.push(arr[i])
}
}
let list = arr2.map( (value, key) => (
<li className="list-group-item" style={this.li}
key={key}>{key + 1}. {value}.</li>
))
return (
<div>
<h2>{this.props.title}</h2>
<ol className="list-group">{list}</ol>
</div>
)
}
}
export default App
あとがき
実用的ではないかもしれませんが、残しておきます。
コメントを残す