Reactコンポーネント内でグローバルに定義されたスクリプトを使用する

Reactは、あらゆる種類のWebアプリを作成するために使用できます。Reactの柔軟性により、開発者はReactを既存のWebアプリに簡単に埋め込むことができます。しかし、現在のシステムにReactを埋め込むということは、React以外に他のライブラリやスクリプトが使用されていることを意味します。

Reactは仮想DOMを使用してWebページ上のDOMノードを操作し、他のほとんどのライブラリは直接DOM操作を行う場合があります。そのため、このガイドでは、Reactコンポーネント内でグローバルに定義されたスクリプトまたは外部から追加されたスクリプトを使用する方法を学習します。

グローバル変数の宣言

グローバル変数は、Reactアプリとは独立したスクリプトタグ内で定義されます。このグローバル変数は、SEOの目的でページに事前にレンダリングする必要のあるデータにすることも、ユーザーの情報を含めることもできます。

グローバル変数は次のように定義できます。

<script>
window.user = {
    id: 3,
    name: "John Doe",
}
</script>

グローバル変数へのアクセス

windowブラウザ環境でのグローバルオブジェクトです。windowオブジェクトにアタッチされたプロパティには、Reactアプリのスクリプトを含め、Webページ上の任意のスクリプトからアクセスできます。

以来、windowグローバルオブジェクトであり、以下に示すように、コードは、その特性にもアクセスすることができる反応します。

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      user: window.user,
    };
  }

  render() {
    const { user } = this.state;
    return (
      <div>
        <p> ID: {user.id} </p>
        <p> Name: {user.name} </p>
      </div>
    );
  }
}

オブジェクトを使用せずに、グローバルオブジェクトのプロパティに直接アクセスすることもできwindowます。ただし、ユーザーオブジェクトがどこで定義されているかが明確にならないため、コードのデバッグが困難になります。windowオブジェクトを介してプロパティにアクセスすると、そのプロパティがグローバルに定義および設定されていることがわかります。

Reactコンポーネントでの外部スクリプトの使用

現在、独自のReactコンポーネントを持たないライブラリが必要な場合や、jQueryなどのReactと同様に機能しない場合があります。

jQueryは人気のあるJavaScriptライブラリですが、仮想DOMを利用していません。代わりに、直接DOM操作を行います。したがって、このセクションでは、ReactコンポーネントでjQueryを使用する方法を学習します。

ボタンクリックでユーザー情報を非表示にする必要があるとします。これを実現するには、jQueryのhide()メソッドを使用できます。通常、DOMセレクターをjQueryに渡します。ただし、React内でjQueryを使用する場合は、を指定する必要がありますref。

Arefは、renderReactコンポーネントのメソッドで定義されているDOMノードにアクセスするためのインターフェースを提供します。メソッドrefを使用して作成できますReact.createRef()。実際のDOM要素を取得するには、DOMノードを直接操作するときrefにのfindDOMNode()メソッドにを渡しreact-domます。

import React from "react";
import { findDOMNode } from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: window.user,
    };
    this.domRef = React.createRef();
  }

  hideInfo = () => {
    const $ = window.$;
    const el = findDOMNode(this.domRef);
    $(el).hide();
  };

  render() {
    const { user } = this.state;
    return (
      <div>
        <button onClick={this.hideInfo}>Hide Info</button>
        <div ref={this.domRef}>
          <p> ID: {user.id} </p>
          <p> Name: {user.name} </p>
        </div>
      </div>
    );
  }
}

結論

Reactと一緒に直接DOM操作を行うライブラリを使用することはお勧めしません。これにより、コードにバグが発生する可能性があり、特にエンタープライズレベルのアプリでは、追跡が非常に困難になる可能性があります。ただし、アプリを完成させるための特定の要件を満たすために、特定のライブラリを使用したい場合があります。このようなシナリオでは、Reactを使用refしてWebページにマウントされるDOMノードにアクセスし、を使用してref、外部ライブラリ内の任意のメソッドを呼び出すことができます。

リンク: https://www.pluralsight.com/guides/how-to-use-a-globally-defined-script-inside-a-react-component

#reactjs

グローバル変数の宣言

グローバル変数は次のように定義できます。

<script>
window.user = {
    id: 3,
    name: "John Doe",
}
</script>

グローバル変数へのアクセス

以来、windowグローバルオブジェクトであり、以下に示すように、コードは、その特性にもアクセスすることができる反応します。

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      user: window.user,
    };
  }

  render() {
    const { user } = this.state;
    return (
      <div>
        <p> ID: {user.id} </p>
        <p> Name: {user.name} </p>
      </div>
    );
  }
}

Reactコンポーネントでの外部スクリプトの使用

現在、独自のReactコンポーネントを持たないライブラリが必要な場合や、jQueryなどのReactと同様に機能しない場合があります。

import React from "react";
import { findDOMNode } from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: window.user,
    };
    this.domRef = React.createRef();
  }

  hideInfo = () => {
    const $ = window.$;
    const el = findDOMNode(this.domRef);
    $(el).hide();
  };

  render() {
    const { user } = this.state;
    return (
      <div>
        <button onClick={this.hideInfo}>Hide Info</button>
        <div ref={this.domRef}>
          <p> ID: {user.id} </p>
          <p> Name: {user.name} </p>
        </div>
      </div>
    );
  }
}

結論

リンク: https://www.pluralsight.com/guides/how-to-use-a-globally-defined-script-inside-a-react-component

#reactjs

Reactコンポーネント内でグローバルに定義されたスクリプトを使用する

グローバル変数の宣言

グローバル変数へのアクセス

Reactコンポーネントでの外部スクリプトの使用

結論

What is GEEK

Buddha Community