0.10.0版本的Datepicker 嵌入其他组件异常 #525

qiaolb · Nov 13, 2015

我讲Datepicker嵌入的我的组件中，如div中：

  React.createElement(
            'div',
            null,
            React.createElement(antd.Datepicker, { defaultValue: '2015-12-12' })
        )

几个点击日历选择时出错：

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

afc163 · Nov 13, 2015

请贴出 jsx 的源代码。

qiaolb · Nov 13, 2015

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="一个 UI 设计语言"/>
    <title>
Datepicker 日期选择框 - Ant Design
</title>

    <link rel="stylesheet" href="antd.css">

    <script src="http://cdn.bootcss.com/react/0.14.2/react.min.js"></script>
    <script src="http://cdn.bootcss.com/react/0.14.2/react-dom.min.js"></script>

    <script src="antd.js"></script>


  </head>
  <body >



    <div id="components-datepicker-demo-basic"></div>
    <script src="test.js"></script>


  </body>
</html>

test.js：

    (function(){'use strict';

        var ActivityDuedate = React.createClass({
            displayName: 'ActivityDuedate',

            render: function () {
                return React.createElement(
                    'div',
                    null,
                    React.createElement(antd.Datepicker, { defaultValue: '2015-12-12' })
                );
            }
        });

    ReactDOM.render(
        React.createElement(ActivityDuedate, null), 
        document.getElementById('components-datepicker-demo-basic'));
    })()

afc163 · Nov 14, 2015

建议按 http://ant.design/docs/getting-started 的使用方式，使用 webpack + babel 进行构建，不要手写构建后的代码。

qiaolb · Nov 14, 2015

我使用JSX也是同样的问题：

    (function(){'use strict';
       const App = React.createClass({
          render() {
            return <div>
                <antd.dDatepicker defaultValue="2015-12-12" />
              </div>;
          }
        });

        ReactDOM.render(<App /> , 
          document.getElementById('components-datepicker-demo-basic'));
    })()

afc163 · Nov 14, 2015

不如给个可访问的例子。

yiminghe · Nov 16, 2015

不要单独载入 react，可能是载入了两份 react

qiaolb · Nov 16, 2015

@yiminghe 你的意思是需要将下面的删除吗？

<script src="http://cdn.bootcss.com/react/0.14.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/0.14.2/react-dom.min.js"></script>

我删除后错误：

React is not defined

qiaolb · Nov 16, 2015

将Datepicker外包的div去掉就可以正常使用，另外，如果放在Model中加上div也可以正常使用。

render() {
  return <div>
    <antd.Button type="primary" onClick={this.showModal}>显示对话框</antd.Button>
    <antd.Modal title="第一个 Modal" visible={this.state.visible}
    onOk={this.handleOk} onCancel={this.handleCancel}>
      <div>
      <antd.Datepicker defaultValue="2015-12-12" />
      </div>
    </antd.Modal>
  </div>;
}

qiaolb · Nov 16, 2015

另外，当Datepicker嵌入到div中，打开日历时位置也不对，不知道是不是一个问题：

Datepicker在网页中间：

点开后，位置靠左，并下移了一些：

qiaolb · Nov 16, 2015

我的例子地址：

http://121.199.50.139/test/test.html

afc163 · Nov 16, 2015

按 http://ant.design/docs/getting-started 的使用方式来吧，不知道你的 antd.js 是怎么来的。

qiaolb · Nov 16, 2015

@afc163 由于我项目中已经按照这种方式开发了，修改起来比较麻烦。ant-design是git clone最新的。我的antd.js 是自己打包的，我的webpack.config.js：

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
var pkg = require('./package');

var entry = {};
entry[pkg.name] = './index.js';
entry[pkg.name + '-' + pkg.version] = './index.js';
//entry['demo'] = './scripts/demo.js';

module.exports = {
  entry: entry,

  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  output: {
    path: path.join(process.cwd(), 'dist'),
    filename: '[name].js',
    library: 'antd',
    libraryTarget: 'umd'
  },



  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel'
    }, {
      test: /\.json$/,
      loader: 'json-loader'
    }, {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract(
        'css?sourceMap&-minimize!' + 'autoprefixer-loader!' + 'less?sourceMap'
      )
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract(
        'css?sourceMap&-minimize!' + 'autoprefixer-loader'
      )
    }]
  },

  plugins: [
    new ExtractTextPlugin('[name].css')
  ],

  devtool: 'source-map'
};

yiminghe · Nov 16, 2015

antd 默认打包了 react，即 react 载了两次

设置 react react-dom external

qiaolb · Nov 17, 2015

@yiminghe 的确是这样，解决了，非常感谢！

xh4n3 · Apr 25, 2016

@yiminghe 能否升级默认打包的 react 版本？
如果是用 external 的方式加载 react，好像就不能用 class Log extends React.Component 这样来写 class 了吧？

lock · May 5, 2018

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

yiminghe closed this Nov 16, 2015

afc163 referenced this issue Nov 26, 2015
Closed
getInitialState was defined on xxx, #599

MarshallChen referenced this issue Jan 11, 2016
Closed
Invariant Violation: findComponentRoot(...): Unable to find element. #839

lock bot locked as resolved and limited conversation to collaborators May 5, 2018

ant-design/ant-design

Join GitHub today

0.10.0版本的Datepicker 嵌入其他组件异常 #525

Comments

qiaolb commented Nov 13, 2015

This comment has been minimized.

afc163 commented Nov 13, 2015

This comment has been minimized.

qiaolb commented Nov 13, 2015

This comment has been minimized.

afc163 commented Nov 14, 2015

This comment has been minimized.

qiaolb commented Nov 14, 2015

This comment has been minimized.

afc163 commented Nov 14, 2015

This comment has been minimized.

yiminghe commented Nov 16, 2015

This comment has been minimized.

qiaolb commented Nov 16, 2015

This comment has been minimized.

qiaolb commented Nov 16, 2015

This comment has been minimized.

qiaolb commented Nov 16, 2015

This comment has been minimized.

qiaolb commented Nov 16, 2015

This comment has been minimized.

afc163 commented Nov 16, 2015

This comment has been minimized.

qiaolb commented Nov 16, 2015

This comment has been minimized.

yiminghe commented Nov 16, 2015

yiminghe closed this Nov 16, 2015

This comment has been minimized.

qiaolb commented Nov 17, 2015

afc163 referenced this issue Nov 26, 2015

getInitialState was defined on xxx, #599

MarshallChen referenced this issue Jan 11, 2016

Invariant Violation: findComponentRoot(...): Unable to find element. #839

This comment has been minimized.

xh4n3 commented Apr 25, 2016

This comment has been minimized.

lock bot commented May 5, 2018

lock bot locked as resolved and limited conversation to collaborators May 5, 2018