コンポーネント［インスタンスに名前］を付ける

下記のコンポーネントを作成します。

class TObject extends React.Component
{
    state = {
        x: null
    }
    constructor(props)
    {
        super(props);
    }

    WriteLine(e1)
    {
        console.log(e1);
    }

    render()
    {
        return(<div />);
    }
}
export default TObject;

Appコンポーネント内で、作成した上記コンポーネントを利用する

このようなコンポーネントをメインのAppコンポーネントで使うにはrender(){}内を下記のように記述します。

render(){ return(<div><TObject /></div>) };

同じコンポーネントを複数配置する場合

同じコンポーネントを複数配置する場合、それぞれを判断したい。このような場合は、refを使えばオブジェクト名をつけて管理できる。〔Reactでオブジェクト名という言い方はあっているかどうか解らない〕

render(){ 
    return(<div>
        <TObject ref='Object1'/>
        <TObject ref='Object2'/>
    </div>) };

上記のようにrefを設定すると、Appコンポーネントのthis.refsに保存され名前でApp内でそれぞれのオブジェクトを呼び出すことができます。

this.refs.Object1.WriteLine('Object1');
this.refs.Object2.WriteLine('Object2');