参考
https://qiita.com/anoonoll/items/5cceab8f9cf9cef7dd74
props
- コンポーネントの属性を保管する
- 基本的に参照されるのみ
- 値を取り出せるが、書き換えはできない
propsの中身
|
1 |
console.log(this.props) |
- なんかいっぱい値が入っている
なぜ追加するのか
- super(props)を定義しないと、あとからthis.stateなどで、propsへの追加ができないため
使用例
コード
constructor(props)で定義- rederする際に、
this.titleなどを表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React, {Component} from 'react'; import './App.css'; class App extends Component { constructor(props) { super(); this.title = props.title; this.message = props.message; } render() { return <div> <h1>React</h1> <p>{this.title}</p> <p>{this.message}</p> </div>; } } export default App; |
- ReactDom.renderでtitle,messageの中身を定義
|
1 2 3 4 5 6 7 8 |
import React from 'react'; import ReactDom from 'react-dom'; import App from './App'; let render = ReactDom.render( <App title="App" message="this is App Component!" />, document.getElementById('root') ); |
表示
