React组件won'只看到data-reactid=" 0"

React components won't render; only seeing data-reactid=".0"

本文关键字：quot data-reactid 组件 won React      更新时间：2023-09-26

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

但是我调试了几个小时，没有得到任何东西，我希望有人能澄清为什么这个尝试将数据传递到一个React组件，使用原型。映射，并渲染最终组件只是不切割它。

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

你需要你的React组件有大写的名字。React的帮助页面说:

React的JSX使用大写和小写约定来区分

只要有这个就足够了:

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

相关文章：