2017年01月05日

Re : Flux を使わずに React コンポーネント間のコミュニケーションを行う8つの方法

参考:Flux を使わずに React コンポーネント間のコミュニケーションを行う8つの方法 - Qiita

結構はやい段階でReduxに以降してしまったためココらへんの知識が浅いので色々と書いてためしてみました。
方法1. Porps

親から子へPorpsを用いて情報を移動。これは基本

import React from 'react';
import ReactDOM from 'react-dom';

function ChildComponent(props) {
return (
<div>
{props.param}
</div>
)
};

function ParentComponent() {
return (
<div>
<ChildComponent param="XXX"/>
</div>
)
};
//コンポーネントの描画
ReactDOM.render(
<ParentComponent />,
document.getElementById('root')
);


方法2. Ref 関数

Ref関数を利用すれば親コンポーネントから子コンポーネントのメソッドなどにアクセスができる。

import React from 'react';
import ReactDOM from 'react-dom';

class ChildComponent extends React.Component {
getText()
{
return "XXX";
}
render() {
return null
}
};

class ParentComponent extends React.Component {
componentDidMount()
{
console.log(this.refs.child.getText());
}
render() {
return <ChildComponent ref="child" />
}
};
//コンポーネントの描画
ReactDOM.render(
<ParentComponent />,
document.getElementById('root')
);


以下のようにすれば子コンポーネントで入力された内容を親コンポーネントで利用することができます。

import React from 'react';
import ReactDOM from 'react-dom';

class ChildComponent extends React.Component {
getText(){
return this.refs.text.value;
}
render() {
return (
<input type="text" ref="text"/>
);
}
}

class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick()
{
console.log(this.refs.child.getText());
}
render() {
return <div>
<ChildComponent ref="child" />
<input type="button" value="click" onClick={this.handleClick}/>
</div>
}
};
//コンポーネントの描画
ReactDOM.render(
<ParentComponent />,
document.getElementById('root')
);


以下のようにすれば子コンポーネントで入力された内容を親コンポーネントに反映や子コンポーネントの内容を親コンポーネントに反映することができます。

import React from 'react';
import ReactDOM from 'react-dom';

class ChildComponent extends React.Component {
setText(val){
this.refs.childText.value = val;
}
getText(){
return this.refs.childText.value;
}
render() {
return (
<input type="text" ref="childText"/>
);
}
}

class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.parent2child = this.parent2child.bind(this);
this.child2parent = this.child2parent.bind(this);
}
parent2child()
{
this.refs.child.setText(this.refs.parentText.value);
}
child2parent()
{
this.refs.parentText.value = this.refs.child.getText();
}
render() {
return <div>
<input type="text" ref="parentText"/><br />
<input type="button" value="↓" onClick={this.parent2child}/>
<input type="button" value="↑" onClick={this.child2parent}/>
<br />
<ChildComponent ref="child" /><br />
</div>
}
};
//コンポーネントの描画
ReactDOM.render(
<ParentComponent />,
document.getElementById('root')
);


方法3. コールバック関数]

基本的にはバケツリレーと呼ばれるpropsに関数を配置してわたしていく。サンプルはちょっとややこしめの親コンポーネントの内容をrefsを使わずに子コンポーネントに渡すのも書いている。refsつかわんとstateレスにかけないのかな。(イベント起点の子コンポーネントのみ再描画したかったけどやり方がわからず)

import React from 'react';
import ReactDOM from 'react-dom';

class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.props.child2parent(this.refs.childText.value);
}
componentDidUpdate(){
this.refs.childText.value = this.props.text
}
render() {
return (
<div>
<input type="text" ref="childText" />
<input type="button" value="↑" onClick={this.handleClick}/>
</div>
);
}
}

class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.parent2child = this.parent2child.bind(this);
this.child2parent = this.child2parent.bind(this);
this.state = {
text:""
}
}
parent2child()
{
this.setState({
text:this.refs.parentText.value
})
}
child2parent(val)
{
this.refs.parentText.value = val;
}
render() {
return <div>
<input type="text" ref="parentText"/>
<input type="button" value="↓" onClick={this.parent2child}/>
<ChildComponent child2parent={this.child2parent} text={this.state.text} />

</div>
}
};
//コンポーネントの描画
ReactDOM.render(
<ParentComponent />,
document.getElementById('root')
);
タグ:REACT
posted by ねこまんま at 14:44 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/445570641
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック