アウトプットするブログ

状態オブジェクトの初期化と読み取り

今回はフォームを作ってそれらを出力する準備をします。
以前のコードではCardListコンポーネントから直接読み取っていたのですが、
フォームコンポーネントからイベントを受け取る為に親コンポーネントから受信させる必要があります。
それではみていきましょう

JSX,REACT,REACT DOMが既に入っているこちらのIDEを使って一緒に進めていくとやりやすいです。 https://jscomplete.com/playground

今回のコード

const testData = [
    {name: "Dan Abramov", avatar_url: "https://avatars0.githubusercontent.com/u/810438?v=4", company: "@facebook"},
    {name: "Sophie Alpert", avatar_url: "https://avatars2.githubusercontent.com/u/6820?v=4", company: "Humu"},
    {name: "Sebastian Markbåge", avatar_url: "https://avatars2.githubusercontent.com/u/63648?v=4", company: "Facebook"},
];

const CardList = (props) => (
	<div>
  	{props.profile.map(profile => <Card {...profile}/>)}
	</div>
);

class Card extends React.Component {
	render() {
  	const profile = this.props;
  	return (
    	<div className="github-profile">
    	  <img src={profile.avatar_url} />
        <div className="info">
          <div className="name">{profile.name}</div>
          <div className="company">{profile.company}</div>
        </div>
    	</div>
    );
  }
}
class Form extends React.Component {
	render() {
  	return (
    	<form action="">
    	  <input type="text" placeholder="GitHub username"/>
        <button>Add card</button>
    	</form>
    );
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        profile: testData,
    }
  }  
	render() {
  	return (
    	<div>
    	  <div className="header">{this.props.title}</div>
        <Form />
        <CardList profile={this.state.profile}/>
    	</div>
    );
  }	
}

ReactDOM.render(
	<App title="The GitHub Cards App" />,
  mountNode,
);

データの初期化

const CardList = (props) => (
	<div>
  	{props.profile.map(profile => <Card {...profile}/>)}
	</div>
);

props.profileの状態オブジェクトとして取得しているこの場所ですが前回までは表示するのみを目的としていたのでグローバル変数のtestDataを使用していました。

<CardList profile={testData} />

上記で状態オブジェクトを指定したので、propsでtestDataを受け取る必要があります。

constructor(props) {
  super(props);
  this.state = {
      profile: testData,
  }
}

今回新しいレコードが追加される度にReactがCardListコンポーネントを再レンダリングするようにしたいので、
特殊な状態オブジェクトにprofile配列を配置する必要があります。
ここでFormやCardコンポーネントに内包せずAppへ書き込んでる理由としては配列の所有してるコンポーネントが兄弟であると、
コンポーネント間で配列のやりとりができないことにあります。
よって、親コンポーネントであるAppに配置している分けです。

クラスコンポーネントにてpropsはReactがマウントされた情報をインメモリインスタンスでも管理できます。
Appコンポーネントでpropsを初期化するにはインスタンス化されたオブジェクトごとに呼び出されるconstructor()
を使用する必要があります。
super()は子クラスから親クラスの値を呼び出す為に記述します。
これをすることでpropへアクセスできます。
これは最終的にはからの配列として設置するものとなっています。
今現在testDataなので今はこれで動作します。

ブログの投稿ログ

初めてのREACT-v8

状態オブジェクトの初期化と読み取り

今回のコード

データの初期化

ブログの投稿ログ

初めてのREACT-v8

# 状態オブジェクトの初期化と読み取り

# 今回のコード

# データの初期化

状態オブジェクトの初期化と読み取り

今回のコード

データの初期化