実例解説Reactコンポーネント

この章では、コンポーネントの使い方について、私たちのアプリケーションをより簡単に管理できるようにします。
次に、出力をカプセル化します。「ハローワールド！」のコンポーネントの名前はハローMessageです。

function HelloMessage(props) {
 return <h1>Hello World!</h1>;
}
 
const element = <HelloMessage />;
 
ReactDOM.render(
 element,
 document.getElementById('example')
);

インスタンス解析:
1、関数を使ってコンポーネントを定義できます。

function HelloMessage(props) {
 return <h1>Hello World!</h1>;
}

ES 6クラスを使ってコンポーネントを定義することもできます。

class Welcome extends React.Component {
 render() {
 return <h1>Hello World!</h1>;
 }
}

2、const element = <HelloMessage /> は、ユーザによってカスタマイズされたコンポーネントである。
オリジナルのHTML要素名は小文字で始まるが、カスタムのReactクラス名は大文字で始まる。例えばハローMessageはハローMessageとは書くことができない。この他にも、コンポーネント類はトップレベルのラベルしか含まれていないので、エラーが発生します。
パラメータをコンポーネントに渡す必要がある場合、this.propsオブジェクトを使用することができます。例は以下の通りです。

function HelloMessage(props) {
 return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="jb51"/>;
 
ReactDOM.render(
 element,
 document.getElementById('example')
);

上記の例ではname属性はprops.nameによって取得される。
属性を追加する場合、クラスの属性はクラスNameと書く必要があります。for属性はhttml Forと書く必要があります。これはクラスとforはJavaScriptの保留字です。
コンポジット
複数のコンポーネントを作ることによって一つのコンポーネントを合成し、すなわちコンポーネントの異なる機能点を分離することができます。
以下の例では、ウェブサイトの名前とURLを出力するコンポーネントを実現しました。

function Name(props) {
 return <h1>    ：{props.name}</h1>;
}
function Url(props) {
 return <h1>    ：{props.url}</h1>;
}
function Nickname(props) {
 return <h1>    ：{props.nickname}</h1>;
}
function App() {
 return (
 <div>
  <Name name="  " />
  <Url url="https://www.jb51.net/" />
  <Nickname nickname="jb51" />
 </div>
 );
}
 
ReactDOM.render(
  <App />,
 document.getElementById('example')
);

出力結果:

以上は例を挙げてReactコンポーネントの詳細を説明しました。Reactコンポーネントに関する資料は他の関連記事に注目してください。