遇到问题使用反应砌体组分

Question

我试图使用反应砌体组分：我以前用过的jQuery原来的砖石插件https://github.com/eiriklv/react-masonry-component

但我完全新的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) 

我使用的阵营0.14.0-β3

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

Answer 1

问题是this.props.elements未定义，所以你不能调用它的地图功能。

您是否尝试过使用react开发工具？您可以使用工具检查工程组件，并查看哪些道具在每个组件中定义。

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

我的猜测是，你不能传递正确的变量到组件元素道具。

Answer 2

我也是新来的反应，并在前几天有相同的问题。在阅读this tutorial之后，我很清楚。 图方法简单地说就是Array.map方法在数组上调用。在你的情况下，问题是this.props.elements未定义，因为它尚未设置。

下面是一个正确设置数据的小例子。

var React = require('react'); 

module.exports = React.createClass({ 

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

     var MyCard = React.createClass({ 

      render() { 
       return (
        <div style={{padding:'1em'}}> 
         <div style={{border:'1px solid black', width:'100px', height:'100px'}}> 
          {this.props.title} 
         </div> 
        </div> 
       ); 
      } 

     }); 

     var MyGallery = React.createClass({ 

      render() { 

       var children = this.props.cards.map(function(card) { 
        return (
         <MyCard title={card.title}/> 
        ); 
       }); 

       return (
        <Masonry className={'my-gallery-class'} elementType={'ul'} options={{}} disableImagesLoaded={false}> 
         {children} 
        </Masonry> 
       ); 
      } 
     }); 

     var cards = [ 
      { title: 'A'}, 
      { title: 'B'}, 
      { title: 'C'}, 
      { title: 'D'}, 
      { title: 'E'}, 
      { title: 'F'} 
     ]; 

     return (
      <div> 
       <MyGallery cards={cards}/> 
      </div> 

     ); 
    } 
}); 

希望这会有所帮助。

react-masonry-component看起来像一个很好用的简单组件，但我找不到任何可以做的文档。

顺便说一句：运行此代码时，您会收到反应的警告，因为这些项目没有键控。您可能需要阅读http://facebook.github.io/react/docs/multiple-components.html#dynamic-children。

Answer 3

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

这意味着你可以窝在一个画廊组成的元素，像这样：

<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.elements其中childElements被分配删除this.props.。然后，将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> 
    ); 
    } 
}