BUG：PolyEditor不能正常被激活

[destinyd]

• [x] 我已经搜索过 issue，没有类似的问题，或者类似的问题仍然没有解决方案。
• [x] 我已经搜索过文档，并且仍然没有找到解决方案。
• [x] 我写了个问题重现的例子，链接或者代码将会贴在下面。

Reproduce Example Link or Code Fragment

React 16.3.1 react-amap 1.2.7

amap version：1.4.4

import React from 'react'
import { Map, Polygon, PolyEditor } from 'react-amap';

export default class PageTest extends React.Component {
  constructor(p, c) {
    super(p, c)
    this.mapCenter = {longitude: 145, latitude: 30 }
    this.linePath = [
      {longitude: 150, latitude: 20 },
      {longitude: 170, latitude: 20 },
      {longitude: 150, latitude: 30 },
    ];
    this.polygonPath = [
      {longitude: 120, latitude: 30 },
      {longitude: 130, latitude: 30 },
      {longitude: 120, latitude: 40 },
    ];
    this.state = {
      polygonActive: true
    }
  }

  render() {
    return (
      <div>
        <div style={{width: '100%', height: '370px'}}>
          <Map
            amapkey={YOUR_AMAP_KEY}
            version={VERSION}
            zoom={3} center={this.mapCenter}>
            <Polygon path={this.polygonPath}>
              <PolyEditor active={this.state.polygonActive} />
            </Polygon>
          </Map>
        </div>
        <button onClick={() => { this.togglePolygon() }} >Toggle Polygon Editable</button>
      </div>
    )
  }

  togglePolygon(){
    this.setState({
      polygonActive: !this.state.polygonActive
    });
  }
}

What is Expected?

希望多边形会显示出PolyEditor，并且调整编辑

What is actually happening?

PolyEditor未出现，且尝试过传入created事件，也没有执行。

[destinyd]

https://github.com/ElemeFE/react-amap/blob/e6bd05202e9991996efa84c36e0aa1036dd59cd2/components/polygon/index.js#L161

这个判断没能过去，注释掉之后能正常使用了

[destinyd]

哈喽，各位顶级平台的前端大大们，回个话呗

[ioslh]

好迷啊……我写了个例子又没问题

[ioslh]

你那个环境下，你能不能输出 child 和 child.type 看看分别是啥？

[destinyd]

我之前输出过child.type以及PolyEditor 一个是代码里的构建函数，一个好像是react的构建函数，所以两个比较就不等

我现在暂时没那环境输出不了

[destinyd]

child.type:

(function(InitialParent, postConstructionAction) {
  return class ProxyComponent extends InitialParent {
    constructor(props, context) {
      super(props, context)
      postConstructionAction.call(this)
    }
  }
})

_polyeditor2.default:

function withPropsReactive(MapComponent) {
  return function (_React$Component) {
    _inherits(_class, _React$Component);

    function _class(props) {
      _classCallCheck(this, _class);

      var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this, props));

      _this.instanceCreated = false;
      _this.myMapComponent = null;
      _this.registeredEvents = [];
      _this.onInstanceCreated = _this.onInstanceCreated.bind(_this);
      return _this;
    }

@ioslh

[ioslh]

我输出的跟你输出的都不一样唉

[destinyd]

webpack配置有可能导致这样的情况吗？

[unionTime]

@ioslh @destinyd @classicemi 我同样遇到这样的问题： 做了一个地图组件 Mapcom

import React, { Component } from 'react'
import { Map, Polygon, PolyEditor,Polyline } from 'react-amap';
const YOUR_AMAP_KEY = ''

class MapCom extends Component {
  constructor(props) {
      super(props)
      this.state = {
          lineActive: true,
          polygonActive: true,
          polygonPath:[
              {longitude: 120, latitude: 30 },
              {longitude: 130, latitude: 30 },
              {longitude: 120, latitude: 40 },
          ]
      };
      this.linePath = [
          {longitude: 150, latitude: 20 },
          {longitude: 170, latitude: 20 },
          {longitude: 150, latitude: 30 },
        ];
      this.editorEvents = {
          created: (ins) => {console.log(ins)},
          addnode: () => {console.log('polyeditor addnode')},
          adjust: () => {console.log('polyeditor adjust')},
          removenode: () => {console.log('polyeditor removenode')},
          end: () => {console.log('polyeditor end')},
        };
  }
  componentDidMount() {

  }
  render(){
      return (
          <div
             id="app"
             style={{ height: '82vh',width:'80%' }}
             >
              <Map
                  amapkey={YOUR_AMAP_KEY}
                  zoom={3} center={{longitude: 145, latitude: 30  }}>
                  <Polygon path={this.state.polygonPath}>
                      <PolyEditor active={true} events={this.editorEvents} />
                  </Polygon>
                  <Polyline path={this.linePath}>
                      <PolyEditor active={true} />
                  </Polyline>
              </Map>
            </div>
      )
  }
}
export default MapCom

1.编辑能显示的情况： 放在首级组件中:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import * as serviceWorker from './serviceWorker';
import MapCom from './test/test'
ReactDOM.render(<MapCom />, document.getElementById('root'));

显示效果如下:

2.编辑不能显示的情况 我使用嵌套路由，将Mapcom组件作为一个子路由

class HomePage extends Component {
  render() {
    return (
      <div>
        <MeunWrap>
          <Switch>
            <Route index path={routes.WROK} component={MapCom} />
            <Route path={routes.QUERY} component={QueryPage} />
            <Route path={routes.EVALUATION} component={EvaluationPage} />
            <Route path={routes.DEPARTMENT} component={DepartmentPage} />
            <Route path={routes.TYPE} component={TypePage} />
            <Route path={routes.PEOPLE} component={PeoplePage} />
            <Route path={routes.GRID} component={GirdPage} />
          </Switch>
        </MeunWrap>
      </div>
    )
  }
}

显示如下：

请问这个问题出在哪里呀？

[unionTime]

[unionTime]

@ioslh 查到原因了：

import React from 'react';
// import { AppContainer } from 'react-hot-loader'; 引入热跟新后，无法显示 编辑状态
import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import Root from './containers/Root';
import { configureStore, history } from './store/configureStore';
import './app.global.css';

const store = configureStore();

function App() {
 const theme = createMuiTheme({});
  return (
    <ThemeProvider theme={theme} >
        <Root store={store} history={history} />
    </ThemeProvider>
  )
}
export default App;

是这个包的问题，我注释掉react-hot-loader后，就可以显示了。那这又是个什么问题呢？

打扰您了，抱歉