Reactのコンポーネントの使い方

@iwasaki 34views 更新:2017年2月23日

ベースとなるコンポーネント

default と書くことで、他のファイルからも参照できるようになるようです。Javaで言うところのpublicと理解しています。

export default class BaseBox extends Component {
  render() {
    return (
      <div>
        <h2>{this.props.description}</h2>
        <h3>{this.props.text}</h3>
      </div>
    );
  }
}

BaseBox.propTypes = {
  description: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
};

BaseBox.defaultProps = {
  description: '',
  text: '',
};

呼び出し方です。

class MyBox extends Component {
  render() {
    return (
      <div>
        <BaseBox description="あなた" text="こんにちは" />
      </div>
    );
  }
}

export default MyBox;

参考

http://qiita.com/nownabe/items/2d8b92d95186c3941de0

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません