ReactJS 基礎トレーニング

ReactJS プロパティ(Props)アプリケーション内で統合およびサポートされています。親コンポーネントで状態を設定し、以下のように使用します。状態とプロパティの主な違い

これは不可変です。そのため、コンテナコンポーネントは更新および変更可能な状態を定義し、子コンポーネントは状態からデータをプロパティを通じて受け取るべきです。

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
コンポーネント内で不可変データを使用する必要がある場合、main.jsのreactDOM.render()関数にプロパティを追加し、コンポーネントでそれを使用することができます。
　　　ReactDOM.render(<App headerProp="Header from props..." contentProp="Content/>、document.getElementById('app'));
export　default　App;

from props..."

これにより以下の結果が得られます。

デフォルトプロパティ

App.jsx

import　React　from　'react';
コンポーネントの構築関数上でデフォルトプロパティ値を設定することもできますが、それをreactDom.render()要素に追加するのではなく。
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
render() {
　　　class App extends React.Component {
　　　App.defaultProps = {
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/>、document.getElementById('app'));

headerProp: "Header from props...",

contentProp: "Content from props..."

出力が以前と同じになります。state以下の例は、状態とプロパティのアプリケーション内で統合およびサポートされています。親コンポーネントで状態を設定し、以下のように使用します。これをコンポーネントツリーに渡します。propsrender関数内部では、以下のように設定しています。headerPropおよびcontentProp子コンポーネントで使用されます。

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{
　　　constructor(props)　{
　　　　　　super(props);
　　　　　　this.state　=　{
　　　　　　　　　header:　"Header　from　props...",
　　　　　　　　　content:　"Content　from　props..."
　　　　　　}
　　　}
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header　headerProp　=　{this.state.header}/>
　　　　　　　　　　　　<Content　contentProp　=　{this.state.content}/>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Content　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/>、document.getElementById('app'));

結果は前两个の例と同じになりますが、異なるのはデータソースです。このデータソースは最初に以下から来ています。state。それを更新したい場合、状態を更新するだけで、すべてのサブコンポーネントが更新されます。