Reactjs 使用带有React的重复付款表单会产生大量空白iFrame。样式化删除字段

我的表格：

<form id="recurly_form">

          <div data-recurly="number"></div>
          <div data-recurly="month"></div>
          <div data-recurly="year"></div>
          <div data-recurly="cvv"></div>
          <button onClick={this.handleFormSubmit} >
            Place order
          </button>
        </form>

最终结果是一个带有按钮的高空白屏幕：

标记如下所示：

请注意，“月份”字段设置为“可见性：隐藏”。还要注意，

是空的。这是我尝试使用说明书中提供的样式设计的结果

---

请告诉我缺少什么

来自支持部门的回复：“由于React框架与Recurly.js的集成通常不受支持，并且超出了我们的范围，因此我建议您尝试模仿GitHub示例，看看是否可以成功地将该代码与React集成。”最好进行适当的React集成。我不知道他们是否会改变主意。

componentDidMount() {
    $(() => {
      window.recurly.configure({
        publicKey: "ewr1-xxxxxxxxxxxxxxxxx"
      });
    });
  }