Skip to content

/ ant-design

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
qiaolb opened this issue Nov 13, 2015 · 16 comments
Closed

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

qiaolb opened this issue Nov 13, 2015 · 16 comments

Comments

@qiaolb
Copy link
Contributor

@qiaolb qiaolb commented 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
Copy link
Member

@afc163 afc163 commented Nov 13, 2015

请贴出 jsx 的源代码。
@qiaolb
Copy link
Contributor Author

@qiaolb qiaolb commented 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
Copy link
Member

@afc163 afc163 commented Nov 14, 2015

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

@qiaolb qiaolb commented 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
Copy link
Member

@afc163 afc163 commented Nov 14, 2015

不如给个可访问的例子。
@yiminghe
Copy link
Contributor

@yiminghe yiminghe commented Nov 16, 2015

不要单独载入 react，可能是载入了两份 react
@qiaolb
Copy link
Contributor Author

@qiaolb qiaolb commented 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
Copy link
Contributor Author

@qiaolb qiaolb commented 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
Copy link
Contributor Author

@qiaolb qiaolb commented Nov 16, 2015

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

Datepicker在网页中间：
image

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

image
@qiaolb
Copy link
Contributor Author

@qiaolb qiaolb commented Nov 16, 2015

我的例子地址：

http://121.199.50.139/test/test.html
@afc163
Copy link
Member

@afc163 afc163 commented Nov 16, 2015

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

@qiaolb qiaolb commented 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
Copy link
Contributor

@yiminghe yiminghe commented Nov 16, 2015

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

设置 react react-dom external
@yiminghe yiminghe closed this Nov 16, 2015
@qiaolb
Copy link
Contributor Author

@qiaolb qiaolb commented Nov 17, 2015

@yiminghe 的确是这样，解决了，非常感谢！
@afc163 afc163 mentioned this issue Nov 26, 2015
Closed
@MarshallChen MarshallChen mentioned this issue Jan 11, 2016
Closed
@xh4n3
Copy link

@xh4n3 xh4n3 commented Apr 25, 2016

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

@lock lock bot commented 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.
@lock lock bot locked as resolved and limited conversation to collaborators May 5, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
@yiminghe @afc163 @xh4n3 @qiaolb