2019/5/9 react,コンポーネントへのプロパティの渡し方まとめ

①基本

渡される側(コンポーネント側)

export default class MyType extends Component{
  render(){
    console.log(this.props.value);
    return <p>結果はコンソールを確認</p>;
  }
}

---

渡す側(index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MyType from './MyHello';

ReactDOM.render(){
  <MyType value={'鈴木'}/>
  ,document.getElementById('root')
}

これが基本。React.DOM.renderの第一引数にコンポーネントを指定するときに

<MyType value={‘鈴木’}/>

のように書き、コンポーネント側(渡される側)で、

this.props.value

のように書けばプロパティを渡せると。

---

---

②上の基本の方法でオブジェクトを渡すと、

渡される側(コンポーネント側)

import React, { Component } from 'react';

export default class MyAttrMulti extends Component {
  render() {
	console.log(this.props.value);
	console.log(this.props);
	return (
		<ul>
			<li>{this.props.value.name}さん</li>
			<li>{this.props.value.age}才</li>
		</ul>
	);
  }
}

---

渡す側(index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MyAttrMulti from './MyHello';


ReactDOM.render(
    	<div>
    		<MyAttrMulti value={{name:"山田　太郎",age:40}} />
  	</div>, 
  	document.getElementById('root')
);

渡す側(index.js)で

<MyAttrMulti value={{name:”山田　太郎”,age:40}} />

のように渡すオブジェクトを指定した時、

渡される側(コンポーネント側)で

{this.props.value.name}

のようにして受け取れる、と。

 

---

---

➂オブジェクトの渡し方(記法)の別バージョン

渡される側(コンポーネント側)

import React, { Component } from 'react';

export default class MyAttrMulti extends Component {
  render() {
	return (
		<ul>
			<li>{this.props.name}さん</li>
			<li>{this.props.age}才</li>
			<li>{this.props.sex}</li>
		</ul>
	);
  }
}

---

渡す側(index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MyAttrMulti from './MyHello';

const data={
	name	:	'山田権左衛門',
	age	:	18,
	sex	:	'男'
};

ReactDOM.render(
    	<div>
    		<MyAttrMulti {...data} />
  	</div>, 
  	document.getElementById('root')
);

スプレッド構文で上記のようにコンポーネント側に渡した場合

コンポーネント側で

this.props.name

と書けば受け取れる。この場合

this.props.data.name

じゃなくて、

this.props.name

で受け取れると。そういうもんだと覚えるだけww