React基礎知識

参考

link(https://prog-8.com/react/study/2/1#/4)

注意点

▼props作るときに、ファイルApp.jsのから要素の中にカンマをつけないように！カンマつけてて、気が付けなかったことがあった！ ▼また、値を入れるときに、＝ではなく、：を書いてしまうミスが多い。注意！

mapを使ったpropsの作成

import React from 'react';
import Language from './Language';

class App extends React.Component {
  render() {
    // 使うデータ
    const languageList = [
      {
        name: 'nameA',
        image: 'https://・・・'
      },
      {
        name: 'nameB',
        image: 'https://・・・'
      },
      {
        name: 'nameC',
        image: 'https://・・・'
      },
      {
        name: 'nameD',
        image: 'https://・・・'
      },
      {
        name: 'nameE',
        image: 'https://・・・'
      },
      {
        name: 'nameF',
        image: 'https://・・・'
      }
    ];

    return (
      <div>
        <h1>表示一覧</h1>
        <div className='language'>
          {languageList.map((languageItem) => {            
            return (            
              <Language             
                name={languageItem.name}            
                image={languageItem.image}            
              />            
            )            
          })}
        </div>
      </div>
    );
  }
}

export default App;

propsの取得

import React from 'react';

class Language extends React.Component {
  render() {
    return (
      <div className='language-item'>
        <div className='language-name'>{this.props.name}</div>
        <img 
          className='language-image' 
          src={this.props.image} 
        />
      </div>
    );
  }
}

export default Language;

this.propsと書くことで{props名: 値}というオブジェクトを取得できるので、「this.props.props名」とすることでpropsの値を取得できる。