Question

当我尝试在渲染中访问{this.props}时，它会崩溃我的页面。我在这里做错了吗？

var React = require('react');
var DefaultLayout = React.createFactory(require('../layouts/Default'));
var ReactGridLayout = React.createFactory(require('react-grid-layout'));

var DesktopStore = require("../stores/DesktopStore");
var _ = require('lodash');
// var classNames = require('classnames');

var HomePage = React.createClass({
    displayName: 'Index.jsx',

    getInitialState: function(){
        return {
            zoomed: DesktopStore.get('zoom'),
            layout: this.generateLayout()
        };
    },

    getDefaultProps: function() {
        return {
            layout: DefaultLayout,
            grid: {
                items: 20,
                cols: 80,
                rowHeight: 30,
                verticalCompact: false,
                autoSize: false,
                isResizable: false,
                margin: [5,5]
            }
        };
    },

    generateGridDOM: function(){
        return _.map(_.range(this.props.grid.items), function(i) {
            return (<div key={i}><span className="text">{i}</span></div>);
        });
    },

    generateLayout: function(){
        var p = this.props;
        var layout = _.map(new Array(p.grid.items), function(item, i) {
            return {x: 0, y: 1, w: 1, h: 1, i: i};
        });
        return layout;
    },

    render: function() {
        var parentClassString = "desktop";

        if(this.state.zoomed){
          parentClassString += " zoomed";
        }

        return (
            var grid = this.props.grid; // this crashes the page

            <div className={parentClassString}>

                <ReactGridLayout className="gridLayout"
                    layout={this.state.layout} {...this.props.grid} > // this crashes the page
                    {this.generateGridDOM()}
                </ReactGridLayout>

            </div>
        );
    }
});

module.exports = HomePage;

Answer 1

您无法在var grid = this.props.grid;中定义return，将其放在return之前。 render方法只是返回一个根DOM节点或React组件。

如果你查看webpack构建输出，它应该指出var是一个意外的令牌：

ERROR in ./file.js 
Module build failed: 
SyntaxError: Unexpected token (56:12)   
54 |   
55 |         return (
56 |             var grid = this.props.grid; // this crashes the page
   |             ^

ReactJS - 在道具转移的渲染中访问道具子

1 个答案: