@abtasty-innovation/react-module-injection 中文文档教程

Question

Setup

npm install --save @abtasty-innovation/react-module-injection

Usage

Wrap a JS as a module

要从 React 组件将 JS 作为模块运行，请执行以下操作：

import React, { Component } from "react";
import { ModuleWrapper } from "@abtasty-innovation/react-module-injection";

class Reporting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      iframeHeight: 400,
      data: {
        initial: true
      },
      abData: {
        accessToken: "...",
        accountId: "..."
      }
    };
  }
  render() {
    return (
      <ModuleWrapper
        id="test"
        srcUrl="./component.js"
        name="ModuleTest"
        moduleData={this.state.data}
        abData={this.state.abData}
        onEvent={(name, data) =>
          console.log(`event name ${name} triggerd with ${data}`)
        }
        onInjected={() => console.log("Module injected")}
        onWait={() => console.log("Module sent wait !")}
        onReady={() => console.log("Module sent ready !")}
        onUpdatedHeight={e => {
          console.log("Module height updated to : ", e);
          this.setState({
            iframeHeight: e
          });
        }}
        style={{ height: this.state.iframeHeight + "px" }}
      />
    );
  }
}

The props to pass to a module

• srcUrl : the URL of the JS file to load as a module
• data : the custom data to pass to the module as props
• abData : AB Tasty data to pass to the module as props. Contains following fields :
  • accessToken
  • accountId
  • testId
• onEvent : a callback function that will be triggered when module calls props.sendEvent. Contains following args :
  • first arg: the event name
  • second arg: the event data
• onInjected : a callback function that will be triggered when module is injected
• onReady : a callback function that will be triggered when module is ready (abData and event handlers are ready)
• onUpdatedHeight : a callback function that will be triggered when module inner height changes. Contains a single arg with the new iframe height

Create a module

要创建包装为模块的 React 组件，只需用 inject HOC 包装你的组件：

import React, { Component } from "react";
import { inject } from "@abtasty-innovation/react-module-injection";

class ModuleTest extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h2>this.props.data : </h2>
        <div>{JSON.stringify(this.props.data)}</div>
        <h2>this.props.abData : </h2>
        <div>{JSON.stringify(this.props.abData)}</div>
        <div>
          <h2>Test send event :</h2>
          <div>
            <button
              onClick={e =>
                this.props.sendEvent({
                  eventName: "testEvent",
                  data: { dummyData: "youpi" }
                })
              }
            >
              Send Event
            </button>
          </div>
          <div>
            <button onClick={e => this.props.sendReady()}>Send Ready</button>
          </div>
          <div>
            <button onClick={e => this.props.sendWait()}>Send Wait</button>
          </div>
        </div>
      </div>
    );
  }
}

export default inject(ModuleTest);