自分用のメモとして書いておきます。
Contents
ソースの準備
propsでの渡し方（const コンポーネント名 = props => {}）
- 18～22行目が関数コンポーネントになっています。
- 19,20行目のように、props.要素名と指定して値を参照します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>React</title>
</head>
<body>
<h1 class="bg-primary text-white display-4">React</h1>
<div class="container mt-3">
<div id="root">wait...</div>
</div>
<script type="text/babel">
let dom = document.querySelector('#root')
const Welcome = props => {
return <div className={props.alert}>
<p className={props.fontSize}>Hello {props.name}!!</p>
</div>
}
let el = (
<div>
<h5 class="mb-4">{message}</h5>
<Welcome name="Taro" fontSize="h2" alert="alert alert-primary"/>
<Welcome name="Hanako" fontSize="h5" alert="alert alert-dark"/>
</div>
)
ReactDOM.render(el, dom)
</script>
</body>
</html>
必要な要素のみ （const コンポーネント名 = ({要素1,2,3}) => {}）
- 18行目で必要な要素のみ定義します。
- 19,20行目では、propsと書かずに値を参照できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>React</title>
</head>
<body>
<h1 class="bg-primary text-white display-4">React</h1>
<div class="container mt-3">
<div id="root">wait...</div>
</div>
<script type="text/babel">
let dom = document.querySelector('#root')
const Welcome = ({name, fontSize, alert}) => {
return <div className={alert}>
<p className={fontSize}>Hello {name}!!</p>
</div>
}
let el = (
<div>
<h5 class="mb-4">{message}</h5>
<Welcome name="Taro" fontSize="h2" alert="alert alert-primary"/>
<Welcome name="Hanako" fontSize="h5" alert="alert alert-dark"/>
</div>
)
ReactDOM.render(el, dom)
</script>
</body>
</html>
あとがき
表記が正しいか分からなかったのですが、自分用にメモしました。
表記に間違いがあれば訂正したいと思います。
コメントを残す