reactでは、親から子に関数やコンポーネントを渡すことができる。
const UnderstandDialog = (props) => {
return (
<Dialog
className="added-dialog"
isOpen={props.opened}
isCancelable={false}>
<div className="added-message-box">
{props.message}
</div>
<div className="added-button-box">
<UnderstandButton complete={props.click} text={props.text}/>
</div>
</Dialog>
);
};
子に該当するコンポーネントを作っておくだけで他の親にもデータが異なる子コンポーネント
を使いまわせて非常に楽ちんなのですが、逆の場合はどうなんだろうと思い
調べてみることに。
ところが、reactに関する情報を隅から隅まで調べてもピンとくるものが見つからず
今回のお題である子→親への伝搬は無理という結論にいたりました。
例えば、タブで包んだaboutPageから
<Header title={props.title} />
<Tabs
id="toppage-tab"
defaultIndex={this.state.index}
onSelect={this.changeTab}>
<TabPanel>
<HomePage />
</TabPanel>
<TabPanel>
<SearchPage />
</TabPanel>
<Tab className="home-tabbar">
<div>
<Img className='tab-image' src={'img/home.svg'} alt={"home"} />}/><p className='tab-text'>{titles[0]}</p>
</div>
</Tab>
<Tab className="about-tabbar">
<div>
<Img className='tab-image' src={'img/about.svg'} alt={"about"} />}/><p className='tab-text'>{titles[1]}</p>
</div>
</Tab>
</TabList>
</Tabs>
import React, { Component } from 'react';
class About extends Component {
/**
* コンストラクタです
*
* @param {Object} props
* @memberof About
*/
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
}
render() {
return (
<p>about</p>
);
}
}
export default withRouter(About);
やりたかったのが、上記のような子コンポーネントから何らかの値をタブページのヘッダーに
渡す作業なのですが、親でコンストラクタでpropの定義をすると他のstateがおかしくなるので
あれ？これはひょっとして無理なんじゃね？みたいな不信感が募りやがて無理という結論に
至りました。そこでそのような作業をする羽目になるなら子に依存する機能を親が持たなければ
いいと思います。親は親で自己完結する機能のみにしておくのが無難です。
