【React】クラスコンポーネントで属性を設定する

Reactの続きです。前回はクラスを使ったコンポーネントを作りました。今回はこのクラスの中で属性やテキストを設定してみます。それによって汎用的な使い方ができるコンポーネントになります。それではいきましょう！

【目次】

前回のおさらい
属性値を設定
テキストも設定する
最後に

※参考：【React】クラスを使ったコンポーネントの書き方（React.Component、render()、super()） - クモのようにコツコツと

※Reactでやってみたことまとめ
qiita.com

前回のおさらい

前回作ったものはこちら。

See the Pen React - component class1 by イイダリョウ (@i_ryo) on CodePen.

JSコード

//DOM取得
const text = document.querySelector('.text');

//JSXに埋め込む値
const h2Text = 'コンポーネントのクラス';
const name = 'くらす';

//コンポーネントのスタイル
const bgColor = {
    background: '#fcc',    
    padding: '10px',
}

//コンポーネント
class Hello extends React.Component {
    // コンストラクタ設定
    constructor(props) {
        super(props);
    }

    // JSXレンダリング
    render() {
        return <p style={bgColor}>こんにちは、{name}。</p>
    }
}

//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Hello />
        </div>
    </section>
);
    
ReactDOM.render(elm, text);

詳細は前回記事を参照

※参考：【React】クラスを使ったコンポーネントの書き方（React.Component、render()、super()） - クモのようにコツコツと

属性値を設定

今回も掌田さんの「React.js & Next.js入門」を参考に進める。

※参考：

React.js & Next.js超入門

作者:掌田津耶乃
発売日: 2019/08/30
メディア: Kindle版

CSS初期値とCSS設定を入れる連想配列を作る

最初にグローバル変数を設定。

   bgColor = '#fff';
    style = {};

変数bgColorに背景色の初期設定
変数styleに空の配列を入れる（ここにCSSスタイルを設定する）

コンストラクタにCSSを設定する

次にコンストラクタ設定を追加

   // コンストラクタ設定
    constructor(props) {
        super(props);
        this.bgColor = props.bgColor;
        this.padding = props.padding;
        this.style = {
            backgroundColor: this.bgColor,
            padding: '10px'
        }
    }

this.bgColorはprops.bgColor
this.paddingはprops.padding
this.styleの値は連想配列でCSS設定
backgroundColorはthis.bgColor`

JSXレンダリング設定にstyle属性を追加

JSXレンダリング設定にstyle属性を追加

   // JSXレンダリング
    render() {
        return <p style={this.style}>こんにちは、{name}。</p>
    }

pタグのstyle属性をthis.styleに

コンポーネントに背景色の固有値を設定

コンポーネントを3つに増やして背景色を個別に設定する。

//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Hello bgColor="#fcc" />
            <Hello bgColor="#cfc" />
            <Hello bgColor="#ccf" />
        </div>
    </section>
);

Helloコンポーネントを3つに増やす
1つ目のHelloコンポーネントのbgColorを#fccに
2つ目のHelloコンポーネントのbgColorを#cfcに
3つ目のHelloコンポーネントのbgColorを#ccfに

完成品

完成したものこちら。

See the Pen React - component class2 by イイダリョウ (@i_ryo) on CodePen.

3つのpタグの背景色がそれぞれ赤、緑、青になっている！

JSコード（全体）

//DOM取得
const text = document.querySelector('.text');

//JSXに埋め込む値
const h2Text = 'コンポーネントのクラス';
const name = 'くらす';

//コンポーネント
class Hello extends React.Component {
    bgColor = '#fff';
    style = {};

    // コンストラクタ設定
    constructor(props) {
        super(props);
        this.bgColor = props.bgColor;
        this.padding = props.padding;
        this.style = {
            backgroundColor: this.bgColor,
            padding: '10px'
        }
    }

    // JSXレンダリング
    render() {
        return <p style={this.style}>こんにちは、{name}。</p>
    }
}


//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Hello bgColor="#fcc" />
            <Hello bgColor="#cfc" />
            <Hello bgColor="#ccf" />
        </div>
    </section>
);
    
ReactDOM.render(elm, text);

テキストも設定する

先程の例では背景色しか変わらず、コンポーネントに同じテキストが3つ入っている。ここも個別に変更したい。

React公式サイトでクラスコンポーネントのテキスト設定があるのでやってみる。

※参考：コンポーネントと props – React

JSXレンダリングのテキスト部分を変更

   // JSXレンダリング
    render() {
        return <p style={this.style}>こんにちは、{this.props.name}。</p>
    }

pタグの中のnameをthis.props.nameに変更する。

テキスト設定はCSSよりもシンプルだった！コンストラクタの中でpropsを設定しなくてもいきなりrender()メソッドの中でthis.props.nameで設定できるようだ。

React がユーザ定義のコンポーネントを見つけた場合、JSX に書かれている属性と子要素を単一のオブジェクトとしてこのコンポーネントに渡します。このオブジェクトのことを “props” と呼びます。

※参考：コンポーネントと props – React

propsオブジェクトは最初から用意されているんだな。

コンポーネントにテキストの固有値を設定

Helloコンポーネントの属性にnameのテキストを設定

//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Hello bgColor="#fcc" name="赤ちゃん"/>
            <Hello bgColor="#cfc" name="緑ちゃん"/>
            <Hello bgColor="#ccf" name="青ちゃん"/>
        </div>
    </section>
);

1つ目のHelloコンポーネントのnameを赤ちゃんに
2つ目のHelloコンポーネントのnameを緑ちゃんに
3つ目のHelloコンポーネントのnameを青ちゃんに

コンポーネントの属性で値を設定するのはCSSと同じ！

完成品

完成したものこちら。

See the Pen React - component class3 by イイダリョウ (@i_ryo) on CodePen.

コンポーネントのテキストが上から「赤ちゃん」「緑ちゃん」「青ちゃん」になっている！

//DOM取得
const text = document.querySelector('.text');

//JSXに埋め込む値
const h2Text = 'コンポーネントのクラス';

//コンポーネント
class Hello extends React.Component {
    bgColor = '#fff';
    style = {};

    // コンストラクタ設定
    constructor(props) {
        super(props);
        this.bgColor = props.bgColor;
        this.padding = props.padding;
        this.style = {
            backgroundColor: this.bgColor,
            padding: '10px'
        }
    }

    // JSXレンダリング
    render() {
        return <p style={this.style}>こんにちは、{this.props.name}。</p>
    }
}


//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Hello bgColor="#fcc" name="赤ちゃん"/>
            <Hello bgColor="#cfc"  name="緑ちゃん"/>
            <Hello bgColor="#ccf"  name="青ちゃん"/>
        </div>
    </section>
);
    
ReactDOM.render(elm, text);