Question

我正在创建我的第一个React应用程序，所以请提前道歉。新手必须随时学习。

但我进入调试几个小时，无处可去，我希望有人可以澄清为什么这个尝试将数据传递到React组件，使用prototype.map，并渲染最终组件不是削减它。

var imagedata = [{"id":"1"},{"id":"2"},{"id":"3"}];

var portraitPhoto = React.createClass({
  render: function() {
    return (
    <div className="test">
      <img src={"./build/assets/images/photos/square_raw/" + this.props.imagepath + ".jpg"} 
        className="full-width-portrait" />
      </div>
    );
  }
});


var portrait = React.createClass({
    getDefaultProps: function(){
    return {
      data: imagedata
    }
  },
  render: function() {
    var portraitEach = this.props.data.map(function (imaged,i) {
          return (
                <div className="portrait2">
                    <portraitPhoto imagepath={imaged.id}/>
                </div>
          );
        });
    return (
       <div className="portrait-container">
            {portraitEach}
        </div>
    );
  }
});

React.render(
  <portrait/>,
  document.getElementById('portraits')
);

Answer 1

您需要React组件具有大写名称。 React's help page说：

React的JSX使用大写和小写惯例来区分本地组件类和HTML标记之间

只要这样就足够了：

var PortraitPhoto = React.createClass({ ... ... });

关于jsfiddle的演示是here。

React组件不会呈现;只看到data-reactid =“。0”

1 个答案: