当前位置: 动力学知识库 > 问答 > 编程问答 >

react jsx - getDefaultProps is not working using reactjs

问题描述:

I am trying to use getDefaultProps method for the below example using react.js and I found it is not working for me:

HTML:

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js">

</script>

<div id="container">

<!-- This element's contents will be replaced with your component. -->

</div>

Javascript:

var RecentChangesTable = React.createClass({

render: function() {

return ( < table className = 'table' > {

this.props.children

} < /table>);

}

});

RecentChangesTable.Heading = React.createClass({

render: function() {

var headingStyle = {

backgroundColor: 'FloralWhite',

fontSize: '19px'

};

return <th style = {

headingStyle

} > {

this.props.heading

} < /th>;

}

});

RecentChangesTable.Headings = React.createClass({

render: function() {

var headings = this.props.headings.map(function(name, index) {

return <RecentChangesTable.Heading key = {

index

}

heading = {

name

}

/>

});

return <thead > < tr > {

headings

} < /tr></thead >

}

});

RecentChangesTable.Row = React.createClass({

render: function() {

var trStyle = {

backgroundColor: 'aliceblue'

}

return <tr style = {

trStyle

} >

< td > {

this.props.changeSet.when

} < /td> < td > {

this.props.changeSet.who

} < /td> < td > {

this.props.changeSet.description

} < /td> < /tr >

}

});

RecentChangesTable.Rows = React.createClass({

render: function() {

var rows = this.props.changeSets.map(function(changeSet, index) {

return ( < RecentChangesTable.Row key = {

index

}

changeSet = {

changeSet

}

/>);

});

return ( < tbody > {

rows

} < /tbody>)

}

});

var App = React.createClass({

getDefaultProps: function() {

return {

headings: ['When happened ', 'Who did it', 'What they change']

};

},

render: function() {

return ( < RecentChangesTable >

< RecentChangesTable.Rows changeSets = {

this.props.changeSets

}

/> < /RecentChangesTable > );

}

});

var data = [{

"when": "2 minutes ago",

"who": "Jill Dupre",

"description": "Created new account"

}, {

"when": "1 hour ago",

"who": "Lose White",

"description": "Added fist chapter"

}];

var headings = ['When', 'Who', 'Description'];

var props = {

headings: headings,

changeSets: data

};

React.render( < App changeSets = {

data

}

/>, document.body);

Can anyone tell me is there I am missing here.

网友答案:

I updated the code as mentioned below and it worked for me:

var RecentChangesTable = React.createClass({
  render: function() {
    return ( < table className = 'table' > {
        this.props.children
      } < /table>);
    }
  });

RecentChangesTable.Heading = React.createClass({
  render: function() {
    var headingStyle = {
      backgroundColor: 'FloralWhite',
      fontSize: '19px'
    };
    return <th style = {
      headingStyle
    } > {
      this.props.heading
    } < /th>;
  }
});

RecentChangesTable.Headings = React.createClass({
  render: function() {
    var headings = this.props.headings.map(function(name,index) {
      return <RecentChangesTable.Heading key={index} heading = {
        name
      }
      />
    });
    return <thead > < tr > {
      headings
    } < /tr></thead >
  }
});

RecentChangesTable.Row = React.createClass({
    render: function() {
      var trStyle = {
        backgroundColor: 'aliceblue'
      }
      return <tr style = {
          trStyle
        } >
        < td > {
          this.props.changeSet.when
        } < /td> < td > {
      this.props.changeSet.who
    } < /td> < td > {
    this.props.changeSet.description
  } < /td> < /tr >
}
});

RecentChangesTable.Rows = React.createClass({
      render: function() {
        var rows = this.props.changeSets.map(function(changeSet,index) {
            return ( < RecentChangesTable.Row key={index} changeSet = {
                changeSet
              }
              />);
            });
          return ( < tbody > {
              rows
            } < /tbody>)
          }
        });



      var App = React.createClass({
                getDefaultProps:function(){
            return {
            headings:['When happened','Who did it','What they change']
          };
        },

          render: function() {
            return ( < RecentChangesTable >
              < RecentChangesTable.Headings headings = {
                this.props.headings
              }
              /> < RecentChangesTable.Rows changeSets = {
              this.props.changeSets
            }
            /> < /RecentChangesTable > );
        }
      });

    var data = [{
      "when": "2 minutes ago",
      "who": "Jill Dupre",
      "description": "Created new account"
    }, {
      "when": "1 hour ago",
      "who": "Lose White",
      "description": "Added fist chapter"
    }];

    var headings = ['When', 'Who', 'Description'];
    var props = {
      //headings: headings,
      changeSets: data
    }; 

    ReactDOM.render( < App {...props}/>,
      document.getElementById('container'));
分享给朋友:
您可能感兴趣的文章:
随机阅读: