Javascript 在使用砌体构件时遇到问题

我正在尝试使用react砌体构件：

我以前在JQuery中使用过原始的Mashise插件，但我对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;

我使用的是React 0.14.0-beta3

---

非常感谢您的帮助。非常感谢。

问题在于中未定义this.props.elements，因此无法对其调用map函数

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

---

我的猜测是，您没有将正确的变量传递到组件元素属性中。

我也是个新手，几天前也遇到了同样的问题。读完后，我明白了。map方法就是对数组调用的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>

        );
    }
});

var React=require（'React'）；
module.exports=React.createClass（{
render（）{
var圬工=要求（“反应-圬工-构件”）（反应）；
var MyCard=React.createClass({
render（）{
返回(
{this.props.title}
);
}
});
var MyGallery=React.createClass({
render（）{
var children=this.props.cards.map（函数（卡片）{
返回(
);
});
返回(
{儿童}
);
}
});
var卡=[
{标题：'A'}，
{标题：'B'}，
{标题：'C'}，
{标题：'D'}，
{标题：'E'}，
{标题：'F'}
];
返回(
);
}
});

希望这有帮助

react-massiness组件似乎是一个很好的、易于使用的组件，但我找不到任何关于它能做什么的文档

---

顺便说一句：运行此代码时，您将从react获得一条警告，因为这些项没有设置关键帧。您可能需要仔细阅读。

这里有几个选项。一种是使用

this.props.children

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

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

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

---

另一种选择是从分配

childElements

的

this.props.elements

中删除

this.props.

。然后将

元素

变量分配给具有

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

类库扩展组件{
render（）{
常量元素=[{src:'URL'}，{src:'URL'}，{src:'URL'}]
const childElements=elements.map（（元素，索引）=>{
返回(


);
});
返回(
{childElements}
);
}
}

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