Question

我正在尝试实施_grid。所有示例都通过createElement(el) { ... return ( <div key={i} _grid={el}> ... </div> ); }, div属性传递网格项配置：

return (
  <div key={i} _grid={el}>
    <DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/>
    <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span>
  </div>
)

在我的实施中：

dashboard_view.browserify.browserified.js:1216 Warning: Unknown prop `_grid` on <div> tag. Remove this prop from the element. For details, see <URL ommitted because SO complained about URL shorteners>
  in div (created by DashboardLayout)
  in Resizable (created by GridItem)
  in DraggableCore (created by GridItem)
  in GridItem (created by ReactGridLayout)
  in div (created by ReactGridLayout)
  in ReactGridLayout (created by ResponsiveReactGridLayout)
  in ResponsiveReactGridLayout (created by _class)
  in _class (created by DashboardLayout)
  in div (created by DashboardLayout)
  in DashboardLayout

我收到错误：

npm

我对React很新。我做错了什么？

我使用的相关"react": "^15.2.1", "react-dom": "^15.2.1", "react-grid-layout": "^0.12.7",软件包版本：

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class ModuleServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap the application services.
     *
     * @return void
     */
    public function boot()
    {

        $modules = config('modules');

        if (ENVIRONMENT != 'local') {

        } else {

            foreach ($modules as $key => $module) {

                // Load the routes for each of the modules
                if(file_exists(__DIR__ . "../../../modules/{$module}/routes.php")) {
                    require __DIR__ . "../../../modules/{$module}/routes.php";
                } else {
                    echo "{$module} Module Not found"; die;
                }

                // Load the views
                if(is_dir(__DIR__ . "../../../modules/{$module}/views")) {
                    $this->loadViewsFrom(__DIR__ . "../../../modules/{$module}/views", $module);
                } else {
                    echo  "{$module} Module View Not found"; die;
                }
            }

        }

    }

    /**
     * Register the application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

Answer 1

这是React在今年5月左右对其代码库进行的更改。有关详细信息，请参阅this pull request。

您收到此错误的原因是您尝试呈现无HTML识别的属性。

在HTML5中，您需要使用data-*定义自定义属性。

为了防止在您的情况下显示警告，您必须将渲染方法更改为此。

return (
    <div key={i} data-grid={el}>
        <DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/>
        <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span>
    </div>
);

请注意，_grid已更改为data-grid，现在会将其视为有效的HMTL属性。

React需要注意的一点是，它允许您将自定义道具传递给自定义组件，但是当您将这些组件呈现为HTML时，它们需要是有效的HTML属性。

react-grid-layout示例<div>标签上的未知道具`_grid`

1 个答案: