Le Tutoriel de ReactJS Lists et Keys

React Lists
React Keys

1. React Lists

En Javascript, vous voulez créer un nouveau tableau à partir d'un tableau disponible en convertissant chaque élément du tableau d'origine pour créer l'élément correspondant du nouveau tableau, vous pouvez utiliser la méthode map().

Pour plus de simplicité, consultez l'exemple SVP, vous avez un tableau de nombres entiers, tels que [1, 2, 5], et vous voulez créer un autre tableau en multipliant chaque élément du tableau initial par 10.

var arr1 = [1, 2, 5];

console.log(arr1); // --> [1, 2, 5]

var arr2 = arr1.map( e  => e * 10 );

console.log(arr2); // --> [10, 20, 50]

En JSX vous pouvez également faire la même chose, à partir d'un tableau d'objets, créez un nouveau tableau contenant des étiquettes (Tag) :

var array1 = [        
  { empId: 1, fullName: "Trump", gender: "Male" },        
  { empId: 2, fullName: "Ivanka", gender: "Female" },        
  { empId: 3, fullName: "Kushner", gender: "Male" }        
];

var array2 = array1.map (
    e =>
    <Emloyee fullName={e.fullName} gender={e.gender} />  
);

Example:

Dans cet exemple, j'ai un tableau contenant des informations sur les employés (employee) et je vais afficher les informations de ces employés sur l'interface, comme illustré ci-dessous.

lists-example.jsx

// Employee Component
class Employee extends React.Component {
  render() {
    return (
      <li className="employee">
        <div>
          <b>Full Name:</b> {this.props.fullName}
        </div>
        <div>
          <b>Gender:</b> {this.props.gender}
        </div>
      </li>
    );
  }
}

// EmployeeList Component
class EmployeeList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      employees: [
        { empId: 1, fullName: "Trump", gender: "Male" },
        { empId: 2, fullName: "Ivanka", gender: "Female" },
        { empId: 3, fullName: "Kushner", gender: "Male" }
      ]
    };
  }

  render() {
    // Array of <Employee>
    var listItems = this.state.employees.map(e => (
      <Employee fullName={e.fullName} gender={e.gender} />
    ));
    return (
        <ul className="employee-list">
           {listItems}
        </ul>
      );
  }
}

// Render
ReactDOM.render(<EmployeeList />, document.getElementById("employeelist1"));

lists-example.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Lists</title>
      <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

      <style>
         .employee-list  {
           border:1px solid #cbbfab;
           list-style-type : none;
           padding: 5px;
           margin: 5px;
         }
         .employee {
            border: 1px solid #ccc;
            margin: 5px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>React Lists:</h3>

      <div id="employeelist1"></div>

      <script src="lists-example.jsx" type="text/babel"></script>
   </body>
</html>

Voir plus de cette méthode map() de Array :
Les Tableaux (Array) en JavaScript

2. React Keys

Keys (Clés) permet à React de distinguer des item dans une liste. Il permet à React de gérer les item changés, des nouveaux item sont ajoutés, ou des item sont extrait de la liste.

A partir d'un tableau d'objets, vous créez un nouveau tableau contenant des étiquettes (tag), qui doivent avoir l'attribut key, et leurs valeurs ne sont pas pareilles.

keys-example.jsx

// Employee Component
class Employee extends React.Component {
  render() {
    return (
      <li className="employee">
        <div>
          <b>Full Name:</b> {this.props.fullName}
        </div>
        <div>
          <b>Gender:</b> {this.props.gender}
        </div>
      </li>
    );
  }
}

// EmployeeList Component
class EmployeeList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      employees: [
        { empId: 1, fullName: "Trump", gender: "Male" },
        { empId: 2, fullName: "Ivanka", gender: "Female" },
        { empId: 3, fullName: "Kushner", gender: "Male" }
      ]
    };
  }

  render() {
    // Array of <Employee>
    var listItems = this.state.employees.map(e => (
      <Employee key={e.empId} fullName={e.fullName} gender={e.gender} />
    ));
    return (
        <ul className="employee-list">
           {listItems}
        </ul>
      );
  }
}

// Render
ReactDOM.render(<EmployeeList />, document.getElementById("employeelist1"));

key-example.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Lists</title>
      <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

      <style>
         .employee-list  {
           border:1px solid #cbbfab;
           list-style-type : none;
           padding: 5px;
           margin: 5px;
         }
         .employee {
            border: 1px solid #ccc;
            margin: 5px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>React Lists:</h3>

      <div id="employeelist1"></div>

      <script src="keys-example.jsx" type="text/babel"></script>
   </body>
</html>

Le Tutoriel de ReactJS Lists et Keys

1. React Lists

2. React Keys

Tutoriels de programmation ReactJS

Tutoriels de programmation ReactJS

Articles les plus récents