propsに配列を渡す記法まとめ

この記事について

ファンクショナルコンポネントのpropsに配列を渡す記法をまとめました。

ファンクショナルコンポネントは、

statelessなコンポーネントを作りたい時に使います。

【Qiita】【React】ファンクショナルコンポーネント(functional component)の記法まとめ
ここにベーシックなファンクショナルコンポネントの記法ついてまとめました。

この先のコードについて、

ファンクショナルコンポネントはfunctionとアロー関数を使って作成することができ、
constで宣言した変数でも受け取れますし、class構文で受け取ることもできます。

• 1, 2 はファンクショナルコンポネントをfunctionとアロー関数を使って作成して、constで宣言した変数で受け取ったときの記法

• 3, 4 はファンクショナルコンポネントをfunctionとアロー関数を使って作成して、class構文で受け取ったときの記法

という風にまとめました。

constで宣言した変数で受け取ったときの記法

1. function作成したファンクショナルコンポネント

function List1(props){
  return <p>{props.tasks.join(', ')}</p>;
}

const ToDo1 = <p><List1 tasks={[ 'Windows', 'MacOS', 'Android' ]} /></p>;

ReactDOM.render(ToDo1, document.getElementById('todo1'));

アウトプット↓

Windows, MacOS, Android

2. アロー関数で作成したファンクショナルコンポネント

const List2 = (props) => {
  return <p>{props.tasks.join(', ')}</p>;
}

const ToDo2 = <p><List2 tasks={[ 'Ruby on Rails', 'React', 'Flask' ]} /></p>;

ReactDOM.render(ToDo2, document.getElementById('todo2'));

アウトプット↓

Ruby on Rails, React, Flask

class構文で受け取ったときの記法

3. functionで作成したファンクショナルコンポネント

function List3(props){
  return <p>{props.tasks.join(', ')}</p>;
}

class ToDo3 extends React.Component{
  render(){
    return(
      <p><List3 tasks={[ 'Python', 'Ruby', 'JavaScript' ]} /></p>
    );
  }
};

ReactDOM.render(<ToDo3 />, document.getElementById('todo3'));

アウトプット↓

Python, Ruby, JavaScript

4. アロー関数で作成したファンクショナルコンポネント

const List4 = (props) => {
  return <p>{props.tasks.join(', ')}</p>;
}

class ToDo4 extends React.Component{
  render(){
    return(
      <div>
        <List4 tasks={[ 'Kanban', 'Scrum', 'Waterfall' ]} />
      </div>
    );
  }
};

ReactDOM.render(<ToDo4 />, document.getElementById('todo4'));

アウトプット↓

Kanban, Scrum, Waterfall