javascript - ReactJS - MappleToolTip 未渲染

Question

我按照 https://www.npmjs.com/package/reactjs-mappletooltip 上的安装说明进行操作

当我在 Chrome 中检查页面源代码时，MappleToolTip 中的任何内容都不会呈现，甚至不会显示在页面源代码中。我究竟做错了什么？我尝试将其作为单独的组件包含在内，但结果相同，MappleToolTip 渲染中没有任何内容。

我的代码: (注意:为了便于阅读，代码已被缩短)

工具提示.js

import React from 'react';

var MappleToolTip = require('reactjs-mappletooltip');

export const PageWithToolTip = () => {
  return(
    <div>
      <MappleToolTip>
        <div>
          Show Mapple Tip on this
        </div>
        <div>
          Hey! this is damn easy        
        </div>
      </MappleToolTip>
    </div>
  );
}

FoodMenu.js

import React, {Component} from 'react';
import {PageWithToolTip} from './ToolTip';

class FoodMenu extends Component{
  render(){
    return(
      <div className="section-meals">
        <div className="row">
          <h2>
            - Menu -
          </h2>
        </div>
        {PageWithToolTip}
      </div>
     )
   }
}

export default FoodMenu;

谢谢!

Answer 1

就<PageWithToolTip/>而不是{PageWithToolTip} .

并将导入更改为 import MappleToolTip from 'reactjs-mappletooltip';