如何使用 React.JS 求子字符串出现次數(countSubstrings)

React.JS 是一個用於構建用戶界面的 JavaScript 庫，它可以讓開發者更輕鬆地構建高性能的網頁應用程序。在本文中，我們將介紹如何使用 React.JS 來求出子字符串出現的次數。

使用 React.JS 求子字符串出現次數

首先，我們需要安裝 React.JS，可以使用 npm 或 yarn 來安裝。

npm install react

接下來，我們需要創建一個新的 React 組件，並將其命名為 CountSubstrings。

import React from 'react';

class CountSubstrings extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      string: '',
      substring: '',
      count: 0
    };
  }
  render() {
    return (
      

         this.setState({ string: e.target.value })}
        />
         this.setState({ substring: e.target.value })}
        />
        
        {this.state.count}
      

    );
  }
  countSubstrings = () => {
    const { string, substring } = this.state;
    let count = 0;
    let startIndex = 0;
    while (string.indexOf(substring, startIndex) !== -1) {
      count++;
      startIndex = string.indexOf(substring, startIndex) + 1;
    }
    this.setState({ count });
  };
}

export default CountSubstrings;

在上面的代碼中，我們創建了一個 React 組件，它有兩個輸入框，一個按鈕和一個文本框。輸入框用於輸入字符串和子字符串，按鈕用於計算子字符串出現的次數，文本框用於顯示結果。

接下來，我們需要實現 countSubstrings 方法，它將計算子字符串出現的次數。我們使用 indexOf 方法來查找子字符串，並使用一個計數器來計算子字符串出現的次數。

最後，我們將 CountSubstrings 組件匯出，以便在其他組件中使用。

總結

在本文中，我們介紹了如何使用 React.JS 來求出子字符串出現的次數。我們創建了一個 React 組件，它有兩個輸入框，一個按鈕和一個文本框。然後，我們實現了 countSubstrings 方法，它將計算子字符串出現的次數。最後，我們將 CountSubstrings 組件匯出，以便在其他組件中使用。

Categorized in:

ReactReact.js

Tagged in:

,