遇到問題使用反應砌體組分

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> 
    ); 
    } 
}