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

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

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

Comments

Projects
None yet
4 participants
@qiaolb
Contributor

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

This comment has been minimized.

Member

afc163 commented Nov 13, 2015

请贴出 jsx 的源代码。

@qiaolb

This comment has been minimized.

Contributor

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

This comment has been minimized.

Member

afc163 commented Nov 14, 2015

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

@qiaolb

This comment has been minimized.

Contributor

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

This comment has been minimized.

Member

afc163 commented Nov 14, 2015

不如给个可访问的例子。

@yiminghe

This comment has been minimized.

Contributor

yiminghe commented Nov 16, 2015

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

@qiaolb

This comment has been minimized.

Contributor

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

This comment has been minimized.

Contributor

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

This comment has been minimized.

Contributor

qiaolb commented Nov 16, 2015

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

Datepicker在网页中间:
image

点开后,位置靠左,并下移了一些:

image

@qiaolb

This comment has been minimized.

Contributor

qiaolb commented Nov 16, 2015

我的例子地址:

http://121.199.50.139/test/test.html

@afc163

This comment has been minimized.

Member

afc163 commented Nov 16, 2015

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

@qiaolb

This comment has been minimized.

Contributor

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

This comment has been minimized.

Contributor

yiminghe commented Nov 16, 2015

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

设置 react react-dom external

@yiminghe yiminghe closed this Nov 16, 2015

@qiaolb

This comment has been minimized.

Contributor

qiaolb commented Nov 17, 2015

@yiminghe 的确是这样,解决了,非常感谢!

@xh4n3

This comment has been minimized.

xh4n3 commented Apr 25, 2016

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

@lock

This comment has been minimized.

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.