데이터grid는 데이터를 표시하고 편집할 수 있도록 합니다.이것은 많은 데이터 구동이나 업무 라인 응용 프로그램에서 매우 중요하다.나는 이미 내가 구축한 몇몇 응용 프로그램에서 그것을 사용했다.React 응용 프로그램에서 이미 구현되었을 수 있으며 react-bootstrap-table, react-grid 또는 react-table 등의 라이브러리를 사용했습니다.이것들이 있으면 React 응용 프로그램에 Datagrid를 추가할 수 있습니다. 그러나 실시간으로 변경 사항을 완성하고 연결된 장치/브라우저 사이에서 동기화하려면 어떻게 해야 합니까?
본고에서 React에서 실시간 데이터 격자를 구축하는 방법react-table과 Hamoni Sync을 보여 드리겠습니다.reacttable는 경량급의 빠른 라이브러리로 react에서 표를 보여주는 데 사용되며, 페이지와 더 많은 기능을 지원합니다.Hamoni Sync는 애플리케이션 상태를 실시간으로 동기화할 수 있는 실시간 상태 동기화 서비스입니다.사람들의 이름과 성씨로 데이터 격자를 구축하는 방법을 보여 드리겠습니다.
계속하려면 React에 대해 알고 다음 소프트웨어를 설치해야 합니다.

NodeJS

npm & npx . 만약 npm 5.2.0 이상의 버전을 설치했다면, npx와 npm를 함께 설치할 것입니다.

create-react-app

React 응용 프로그램 만들기

create React 앱을 사용하여 새 React 프로젝트를 만듭니다.명령줄을 열고 실행합니다npx create-react-app realtime-react-datatable.이것은 새 디렉터리 realtime-react-datatable 를 만들어서 React 응용 프로그램을 안내합니다. 여기에는 React 응용 프로그램을 구축하는 데 필요한 파일이 포함되어 있습니다.
React 응용 프로그램을 만들려면 React table 및 Hamoni Sync를 설치해야 합니다.명령줄에서 실행 cd realtime-react-datatable 을 실행하여 응용 프로그램의 디렉터리로 전환합니다.명령줄에서 실행npm i react-table hamoni-sync하여 두 패키지를 설치합니다.

렌더링 데이터 메쉬

데이터 격자를 보여주기 위해react표 구성 요소를 사용합니다.파일src/App.js을 열고 다음 코드로 업데이트합니다.

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
// Import Hamoni Sync
import Hamoni from "hamoni-sync";

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
      firstName: "",
      lastName: ""
    };
  }

  handleChange = event => {
    if (event.target.name === "firstName")
      this.setState({ firstName: event.target.value });
    if (event.target.name === "lastName")
      this.setState({ lastName: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
  };

  renderEditable = cellInfo => {
    return (
      <div
        style={{ backgroundColor: "#fafafa" }}
        contentEditable
        suppressContentEditableWarning
        onBlur={e => {
          const data = [...this.state.data];
          data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
          this.setState({ data });
        }}
        dangerouslySetInnerHTML={{
          __html: this.state.data[cellInfo.index][cellInfo.column.id]
        }}
      />
    );
  };

  render() {
    const { data } = this.state;

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          <form onSubmit={this.handleSubmit}>
            <h3>Add new record</h3>
            <label>
              FirstName:
              <input
                type="text"
                name="firstName"
                value={this.state.firstName}
                onChange={this.handleChange}
              />
            </label>{" "}
            <label>
              LastName:
              <input
                type="text"
                name="lastName"
                value={this.state.lastName}
                onChange={this.handleChange}
              />
            </label> 

            <input type="submit" value="Add" />
          </form>
        </p>
        <div>
          <ReactTable
            data={data}
            columns={[
              {
                Header: "First Name",
                accessor: "firstName",
                Cell: this.renderEditable
              },
              {
                Header: "Last Name",
                accessor: "lastName",
                Cell: this.renderEditable
              },
              {
                Header: "Full Name",
                id: "full",
                accessor: d => (
                  <div
                    dangerouslySetInnerHTML={{
                      __html: d.firstName + " " + d.lastName
                    }}
                  />
                )
              }
            ]}
            defaultPageSize={10}
            className="-striped -highlight"
          />
        </div>
      </div>
    );
  }
}

export default App;

위의 코드는 폼과 편집 가능한react표 구성 요소를 보여 줍니다.<ReactTable />,data 및columns 도구를 사용하여 구성 요소를 렌더링합니다.defaultPageSizeprops는 표시할 데이터를 저장하고 dataprops는 열 정의에 사용됩니다.columnsprops의 accessor 속성은 이 열에 표시할 값을 저장하는 속성을 나타냅니다.columnsprops의 Cell: this.renderEditable 속성은react표에 이 열을 편집할 수 있음을 알려줍니다.기타 함수(columns & handleSubmit는 페이지의 폼에서 새로운 데이터 입력을 허용합니다.

Hamoni Sync 추가

데이터 그리드의 데이터는 Hamoni Sync를 사용하여 실시간 검색 및 업데이트됩니다.우리는 handleChange의 18줄에서 하모니 도서관을 도입했다.

import Hamoni from "hamoni-sync";

우리는 그것을 초기화하고 하모니 서버에 연결해야 한다.이를 위해서는 계정과 응용 프로그램 ID가 필요합니다. 다음 절차에 따라 Hamoni에서 응용 프로그램을 만듭니다.

하모니에 등록 및 등록dashboard

텍스트 필드에 기본 설정 응용 프로그램 이름을 입력하고 만들기 버튼을 클릭합니다.이것은 응용 프로그램을 만들고 응용 프로그램 목록 부분에 표시합니다.

계정 ID를 얻기 위해 계정 ID 카드를 확장합니다.

다음 코드를 App.js에 추가하여 Hamoni Sync 서버에 초기화하고 연결합니다.

async componentDidMount() {
   const accountId = "YOUR_ACCOUNT_ID";
  const appId = "YOUR_APP_ID";
  let hamoni;

  const response = await fetch("https://api.sync.hamoni.tech/v1/token", {
    method: "POST",
    headers: {
    "Content-Type": "application/json; charset=utf-8"
    },
    body: JSON.stringify({ accountId, appId })
  });
  const token = await response.json();

    hamoni = new Hamoni(token);
    hamoni
    .connect()
    .then(() => {

    })
    .catch(error => console.log(error));
}

위의 코드는 클라이언트 장치나 브라우저를 Hamoni Sync 서버에 연결합니다.계정과 응용 프로그램 ID를 대시보드에서 복사하여 문자열 자리 표시자로 교체합니다.백엔드에서 동기화 영패 서버를 호출하고 응답 영패를 클라이언트 응용 프로그램에 보내는 것을 권장합니다.이 예에서 나는 그것들을 모두 한 곳에 두었다.
다음 함수를 App.js 블록의 함수에 추가하면 서버에 성공적으로 연결될 때 수행됩니다.

hamoni
    .get("datagrid")
    .then(listPrimitive => {
      this.listPrimitive = listPrimitive;

      this.setState({
        data: [...listPrimitive.getAll()]
      });

      listPrimitive.onItemAdded(item => {
        this.setState({ data: [...this.state.data, item.value] });
      });

      listPrimitive.onItemUpdated(item => {
        let data = [
        ...this.state.data.slice(0, item.index),
        item.value,
        ...this.state.data.slice(item.index + 1)
        ];

        this.setState({ data: data });
      });

      listPrimitive.onSync(data => {
        this.setState({ data: data });
      });
    })
    .catch(console.log);

위의 코드 호출 then() 은 데이터를 가져옵니다. 그 중에서 hamoni.get("datagrid") 은 Hamoni Sync의 응용 프로그램 상태의 이름입니다.Hamoni Sync를 사용하면 동기화 원어라고 하는 3가지 상태를 저장할 수 있습니다.그들은 다음과 같습니다.

값 원어: 이 상태는 문자열, 부울 값 또는 숫자 등 데이터 형식으로 표시된 간단한 정보를 포함한다.읽지 않은 메시지 수, 전환 등에 가장 적합합니다

객체 원어: 객체 상태는 JavaScript 객체로 모델링할 수 있는 상태를 나타냅니다.예를 들어, 게임 점수를 저장합니다.

목록 원어: 상태 대상의 목록을 저장합니다.상태 객체는 JavaScript 객체입니다.목록에 있는 항목의 색인에 따라 항목을 업데이트할 수 있습니다.

상태를 사용할 수 있다면, 상태 원어 대상이 있는 약속을 해석하고 되돌려줍니다.이 대상은 우리로 하여금 업데이트 상태와 실시간으로 상태 업데이트를 얻을 수 있는 방법을 접근할 수 있게 한다.
36줄에서 우리는 datagrid 방법으로 데이터를 얻고 반응 성분의 상태를 설정한다.또한 방법getAll()과 onItemAdded()은 항목을 추가하거나 업데이트할 때 업데이트를 가져오는 데 사용됩니다.onItemUpdated() 메서드는 장치나 브라우저에서 연결이 끊어진 경우 매우 유용합니다. 다시 연결할 때 서버에서 최신 상태를 가져오고 로컬 상태를 업데이트하려고 합니다.

항목 추가 및 업데이트

이전 절에서, 우리는 데이터 grid의 데이터를 얻을 수 있으며, 항목을 추가하거나 업데이트할 때 상태를 업데이트할 수 있습니다.새 항목을 추가하기 위해 코드를 추가하고 열을 편집할 때 항목을 업데이트합니다.다음 코드를 onSync() 메서드에 추가합니다.

handleSubmit = event => {
    this.listPrimitive.add({
        firstName: this.state.firstName,
        lastName: this.state.lastName
    });
    this.setState({ firstName: "", lastName: "" });
    event.preventDefault();
};

이 코드는 폼에서 이름과 성을 가져오고 호출 handleSubmit 방법을 통해 Hamoni Sync의 목록 상태 원어에 추가합니다.이것은 add() 방법을 촉발할 것이다.
데이터 격자에서 항목을 편집할 때 업데이트하기 위해 84줄에서 onItemAdded()props에 전달되는 함수를 다음과 같이 업데이트합니다.

onBlur={e => {
    let row = this.state.data[cellInfo.index];
    row[cellInfo.column.id] = e.target.innerHTML;
    this.listPrimitive.update(cellInfo.index, row);
}}

이 코드는 onBlur 대상에서 검색한 색인에서 항목을 업데이트합니다.Hamoni Sync에서 목록 상태 원어를 업데이트하려면 업데이트할 항목의 인덱스와 값 호출 cellInfo 방법을 사용할 수 있습니다.마지막으로 변경된 방법update()은 다음과 같습니다.

  renderEditable = cellInfo => {
    return (
      <div
        style={{ backgroundColor: "#fafafa" }}
        contentEditable
        suppressContentEditableWarning
        onBlur={e => {
          let row = this.state.data[cellInfo.index];
          row[cellInfo.column.id] = e.target.innerHTML;
          this.listPrimitive.update(cellInfo.index, row);
        }}
        dangerouslySetInnerHTML={{
          __html: this.state.data[cellInfo.index][cellInfo.column.id]
        }}
      />
    );
  };

현재, 데이터 grid에 나타날 초기 데이터를 제외하고, 우리는 응용 프로그램을 실행하는 데 필요한 모든 정보를 거의 가지고 있다.우리는 상태를 만들고 하모니 동기화에 데이터를 제공해야 한다.새 파일 피드를 추가합니다.js, 다음 코드를 추가합니다.

const Hamoni = require("hamoni-sync");
const https = require("https");

const accountId = "YOUR_ACCOUNT_ID";
const appId = "YOUR_APP_ID";
let hamoni;

const data = JSON.stringify({ accountId, appId });

const options = {
  hostname: "api.sync.hamoni.tech",
  path: "/v1/token",
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Content-Length": data.length
  }
};

const req = https.request(options, res => {
  console.log(`statusCode: ${res.statusCode}`);

  res.on("data", token => {
    hamoni = new Hamoni(token);

    hamoni
      .connect()
      .then(response => {
        hamoni
          .createList("datagrid", [
            { firstName: "James", lastName: "Darwin" },
            { firstName: "Jimmy", lastName: "August" }
          ])
          .then(() => console.log("create success"))
          .catch(error => console.log(error));
      })
      .catch(error => console.log(error));
  });
});

req.on("error", error => {
  console.error(error);
});

req.write(data);
req.end();

이것은 Hamoni Sync에 목록 원어 상태renderEditable를 만듭니다.계정과 응용 프로그램 ID로 datagrid 및 AccountID 문자열을 바꿉니다. 명령줄을 열고 실행합니다APP_ID.이것은 성공적으로 node seed.js 메시지를 출력해야 합니다.
이제 React 응용 프로그램을 시작하고 응용 프로그램의 실행 상황을 볼 수 있습니다!명령줄에서 명령create success을 실행하면 기본 브라우저에서 응용 프로그램이 열립니다.

대단히 좋다우리는 페이지를 나누는 실시간 편집 가능한 데이터 격자를 가지고 있다.

결론

우리는 react-table와Hamoni Sync를 사용하여 React에서 실시간 데이터 격자를 구축했다.react표는 데이터grid에 전기를 공급하고 Hamoni Sync는 데이터grid를 처리하는 상태입니다.이 모든 것은 몇 줄의 코드와 더 적은 노력으로 실시간 상태 논리를 설계하는 데 이루어진 것이다.우리가 구축한 응용 프로그램 GitHub 을 얻을 수 있습니다.편집 중인 셀을 추적하거나 다른 사용자가 현재 편집 중인 셀을 잠글 수 있습니다.나는 그것을 주말 해커로 너에게 남겨 줄 것이다.
잘 모르는 부분이 있거나 편집 중인 칸을 잠그거나 강조 표시하려고 시도하는 중 문제가 발생하면 언제든지 의견을 발표하십시오.
즐거움 코드🎉