使用 React.js 的組件靜態資料

React.js 是一個用於構建用戶界面的 JavaScript 函式庫，它可以讓開發者更輕鬆地構建高性能的網頁應用程式。React.js 的組件靜態資料是一個非常有用的功能，它可以讓開發者更輕鬆地構建可重用的組件，並且可以更容易地管理組件的資料。

在 React.js 中，組件靜態資料是一個可以在組件中使用的特殊屬性，它可以讓開發者將資料與組件相關聯，而不需要將資料傳遞給組件。組件靜態資料可以是任何類型的資料，包括字串、數字、物件、陣列等等。

舉個例子，假設我們有一個名為 MyComponent 的 React 組件，它有一個名為 data 的靜態資料屬性，其中包含一個陣列：

class MyComponent extends React.Component {
  static data = [1, 2, 3, 4, 5];
  // ...
}

我們可以在組件中使用 MyComponent.data 來存取該陣列：

class MyComponent extends React.Component {
  render() {
    return (
      

        {MyComponent.data.map(item => (
          
{item}
        ))}
      
    );
  }
}

這樣就可以在組件中使用靜態資料，而不需要將資料傳遞給組件。

另外，組件靜態資料也可以用於構建可重用的組件，因為它可以讓開發者將資料與組件相關聯，而不需要將資料傳遞給組件。舉個例子，假設我們有一個名為 MyList 的 React 組件，它有一個名為 items 的靜態資料屬性，其中包含一個陣列：

class MyList extends React.Component {
  static items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
  ];
  // ...
}

我們可以在組件中使用 MyList.items 來存取該陣列：

class MyList extends React.Component {
  render() {
    return (
      

        {MyList.items.map(item => (
          
{item.name}
        ))}
      
    );
  }
}

這樣就可以在組件中使用靜態資料，而不需要將資料傳遞給組件。

總結來說，React.js 的組件靜態資料是一個非常有用的功能，它可以讓開發者更輕鬆地構建可重用的組件，並且可以更容易地管理組件的資料。