Javascript ReactJs Packer示例

我正在努力掌握更复杂的组件。我想开始工作的一个例子是这个打包机

这是Hellworld示例的基本组件

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

var Hello=React.createClass({
render:function（）{
返回Hello{this.props.name}；
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

//JSFIDLE

在此基础上，我想让这个派克的例子发挥作用——但我如何包括react-packery mixin——是否有一个cnd。这个例子完整吗

var PackeryMixin=require（'react-packery-mixin'）；
变量包装选项={
转换持续时间：0
};
var Packer=React.createClass({
displayName:'SomeComponent'，
混合器：[PackeryMixin（'packeryContainer'，packeryooptions）]，
渲染：函数（）{
var childElements=this.props.elements.map（函数（元素）{
返回(
{element.name}
);
});
返回(
{childElements}
);
}
});
ReactDOM.render(
,
document.getElementById（'Packer'）
);

我在一个砖石工程的例子中得到了这一点，但需要替换大量折旧的元素-最新版本

var PackeryMixin = require('react-packery-mixin');

var packeryOptions = {
    transitionDuration: 0
};

var Packer = React.createClass({
    displayName: 'SomeComponent',

    mixins: [PackeryMixin('packeryContainer', packeryOptions)],

    render: function () {
        var childElements = this.props.elements.map(function(element){
           return (
                <div className="someclass">
                    {element.name}
                </div>
            );
        });

        return (
            <div ref="packeryContainer">
                {childElements}
            </div>
        );
    }
});

ReactDOM.render(
  <Packer name="Packer" />,
  document.getElementById('Packer')
);