javascript - 将 Class 从单个 Js 网页转换为 ReactJs

Question

我是新手，我正在开发一个小项目，该项目使用 Single js Web 页面中的搜索栏从 API 中查找数据。

该组件的主要代码是：

const main = () => {
const searchElement = document.querySelector("search-bar");
const clubListElement = document.querySelector("club-list");
const onButtonSearchClicked = async() => {
    try{
        const result = await DataSource.searchClub(searchElement.value);
        renderResult(result);
    } catch (message) {
        fallbackResult(message)
    }
};

const renderResult = (results) => {
    clubListElement.clubs = results;
        };

const fallbackResult = message => {
    clubListElement.renderError(message);     
};
searchElement.clickEvent = onButtonSearchClicked;
};

export default main;

也是我的搜索栏组件：

    class SearchBar extends HTMLElement{

   constructor(){
      super();
      this.shadowDOM = this.attachShadow({mode: "open"});
   }

   connectedCallback(){
      this.render();
   }

   set clickEvent(event){
      this._clickEvent = event;
      this.render();
   }

   get value(){
      //return this.querySelector("#searchElement").value;
      return this.shadowDOM.querySelector("#searchElement").value;
   }

   render(){
      //this.innerHTML = `
      this.shadowDOM.innerHTML = `
      <style>
      .search-container {
         max-width: 800px;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
         padding: 16px;
         border-radius: 5px;
         display: flex;
         position: sticky;
         top: 10px;
         background-color: white;
     }

     .search-container > input {
         width: 75%;
         padding: 16px;
         border: 0;
         border-bottom: 1px solid cornflowerblue;
         font-weight: bold;
     }

     .search-container > input:focus {
         outline: 0;
         border-bottom: 2px solid cornflowerblue;
     }

     .search-container > input:focus::placeholder {
         font-weight: bold;
     }

     .search-container >  input::placeholder {
         color: cornflowerblue;
         font-weight: normal;
     }

     .search-container > button {
         width: 23%;
         cursor: pointer;
         margin-left: auto;
         padding: 16px;
         background-color: cornflowerblue;
         color: white;
         border: 0;
         text-transform: uppercase;
     }

     @media screen and (max-width: 550px){
         .search-container {
             flex-direction: column;
             position: static;
         }

         .search-container > input {
             width: 100%;
             margin-bottom: 12px;
         }

         .search-container > button {
             width: 100%;
         }
     }
      </style>
      <div id="search-container" class="search-container">
         <input placeholder="Search football club" id="searchElement" type="search">
         <button id="searchButtonElement" type="submit">Search</button>
      </div>
      `;

      this.shadowDOM.querySelector("#searchButtonElement").addEventListener("click", this._clickEvent);
   }
}

customElements.define("search-bar", SearchBar);

此外，我可以将此方法转换为 ReactJS 吗？因为我们知道我们是否不能在 React 的 render() 中声明一个 const。

我经历了一堆慌乱，我不完全确定如何去做。

任何人都可以帮我解决这个问题吗？也欢迎对代码进行任何其他评论，因为我是 Reacts 的新手

之前谢谢你！

标签： javascriptreactjs

Answer 1

首先，你应该删除render方法中的所有 CSS 声明，并将它们抽象到一个单独的 CSS 文件中（你可以考虑CSS 模块，它由 React 支持），使用 CSS-in-JavaScript 库（例如styled-components )，或内联样式。

接下来，您应该将button元素的 onClick 事件与onButtonSearchClicked方法绑定，而不是使用事件侦听器，这与您定义的类似。

通过该方法，您将发出 API 请求，并使用响应更新组件的状态。

class SearchBar extends React.Component {

  async onButtonSearchClicked() {
    const result = await DataSource.searchClub(searchElement.value);
    // set state with return result.
  }

  render() {
    return (
      <div id="search-container" class="search-container">
        <input placeholder="Search football club" id="searchElement" type="search">
        <button id="searchButtonElement" type="submit" onClick={() => this.onButtonSearchClicked}>Search</button>
      </div>
    );
  }
}