react 子コンポーネントでstateを取得

Question

import React from 'react';

var Parent = React.createClass({
	getInitialState:function() {
    return {
			display: "none"
    }
  },
	displayswitch:function() {
		if(this.state.display == "none") {
			this.setState({display:"block"});
		} else {
			this.setState({display:"none"});
		}
  },
  render:function() {
    return (
			<p onClick={this.displayswitch}>btn</p>
    );
  }
});
export default Personal;

上記でこのコンポーネント内でdisplayのスイッチングはできたのですが、
このstateを子コンポーネントでも取得したいのですがどうすればよいでしょうか？

import React from 'react';
import Child from './Child.js';

var Parent = React.createClass({
	getInitialState:function() {
    return {
			display: "none"
    }
  },
	displayswitch:function() {
		if(this.state.display == "none") {
			this.setState({display:"block"});
		} else {
			this.setState({display:"none"});
		}
  },
  render:function() {
    return (
			<Child />
    );
  }
});
export default Personal;

Childの方でstateの値を取得したいです。

Answer 1

Childにpropsとしてdispayを渡すことで子コンポーネントから取得できます

import React from 'react';
import Child from './Child.js';

var Parent = React.createClass({
    getInitialState:function() {
    return {
            display: "none"
    }
  },
    displayswitch:function() {
        if(this.state.display == "none") {
            this.setState({display:"block"});
        } else {
            this.setState({display:"none"});
        }
  },
  render:function() {
    return (
--            <Child />
++            <Child display={this.state.display}/>
    );
  }
});
export default Personal;

子コンポーネントは this.props.displayで情報を取得できるはずです

Comments

[m0a]

尚、React.createClass や getInitialState はES5以前の書き方で意図的でない限り推奨されない書き方だと思いますがその辺は大丈夫そうでしょうか？
ちなみに以下から公式のチュートリアルを日本語でよめます。
[公式日本語訳](https://taiyaq.com/contents/m1OrKPbZv80XsmKLX9ly8XEZe)

[cheche0830]

ありがとうございます！出来ました！また素晴らしい情報ありがとうございました。全然知りませんでした
class Parent extends React.Component
この書き方がいいですかね！
マニュアル見てみます！