Question

我正在尝试使用react-masonry-component：https://github.com/eiriklv/react-masonry-component

我之前使用过JQuery的原始砌体插件，但我对ReactJs及其代码结构完全不熟悉。我已经添加了组件文档中给出的示例代码，但不确定如何使其工作。我试图弄清楚如何将元素添加到砌体网格以及如何将此代码重构为ES6。

import React, { PropTypes } from 'react';
import styles from './Works.css';
import withStyles from '../../../../decorators/withStyles';
import Button from '../../../Button';

var Masonry = require('react-masonry-component')(React);

var masonryOptions = {
    transitionDuration: 0
};

@withStyles(styles)
class Works extends React.Component {

  render() {
    var childElements = this.props.elements.map(function(element){
       return (
          <li className="WorkItem">
              <img src={element.src} />
          </li>
        );
    });
    return (
      <div className="Works">
        <h3>Works</h3>
        <Masonry
            className={'WorkList'}
            elementType={'ul'}
            options={masonryOptions}
            disableImagesLoaded={false}>
            {childElements}
        </Masonry>
      </div>
    );
  }

}

export default Works;

我得到的错误：

TypeError: Cannot call method 'map' of undefined
   at Works.render (/Users/hilarl/Desktop/client/build/webpack:/src/components/ProfilePage/Layout/Works/Works.js:16:45)
   at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/hilarl/Desktop/client/node_modules/react/lib/ReactCompositeComponent.js:546:34)
   at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/hilarl/Desktop/client/node_modules/react/lib/ReactCompositeComponent.js:566:32)
   at [object Object].wrapper [as _renderValidatedComponent] (/Users/hilarl/Desktop/client/node_modules/react/lib/ReactPerf.js:66:21)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/hilarl/Desktop/client/node_modules/react/lib/ReactCompositeComponent.js:181:32)
   at [object Object].wrapper [as mountComponent] (/Users/hilarl/Desktop/client/node_modules/react/lib/ReactPerf.js:66:21)
   at Object.ReactReconciler.mountComponent (/Users/hilarl/Desktop/client/node_modules/react/lib/ReactReconciler.js:37:35)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/hilarl/Desktop/client/node_modules/react/lib/ReactCompositeComponent.js:185:34)
   at [object Object].wrapper [as mountComponent] (/Users/hilarl/Desktop/client/node_modules/react/lib/ReactPerf.js:66:21)
   at Object.ReactReconciler.mountComponent (/Users/hilarl/Desktop/client/node_modules/react/lib/ReactReconciler.js:37:35)

我正在使用React 0.14.0-beta3

非常感谢任何帮助。非常感谢。

Answer 1

问题是没有定义 this.props.elements ，所以你不能在上面调用map函数。

您是否尝试过使用react dev-tools？您可以使用工具检查工作组件，并查看每个组件中定义的道具。

https://github.com/facebook/react-devtools

我的猜测是你没有将正确的变量传递给组件元素 prop。

Answer 2

这里有几个选项。一个是使用this.props.children。

这意味着您可以将元素嵌套在Gallery组件中，如下所示：

<Gallery>
  <img src="SOME_URL" />
  <img src="SOME_URL" />
  <img src="SOME_URL" />
</Gallery>

然后在您的图库组件类中，您将使用this.props.children。

class Gallery extends Components({
  render()
    return (
      <Masonry>
        { this.props.children }
      </Masonry>
    );
  }
});

另一种选择是从this.props.移除this.props.elements，其中childElements被分配。然后在上面将elements变量分配给具有src道具的对象数组。

class Gallery extends Component {
  render() {
    const elements = [{src: 'URL'}, {src: 'URL'}, {src: 'URL'}]

    const childElements = elements.map((element, index) => {
      return (
        <li key={index}>
          <img src={element.src} />
        </li>
      );
    });

    return (
      <Masonry>
        {childElements}
      </Masonry>
    );
  }
}

使用反应 - 砌体组件时遇到问题

2 个答案: