You can chain any of the above with `isRequired` to make sure a ! 4 warning! 5 // is shown if the prop isn't provided.! 6 requiredFunc: React.PropTypes.func.isRequired,! 7 ! 8 // A value of any data type! 9 requiredAny: React.PropTypes.any.isRequired,! 10 ! 11 // You can also specify a custom validator. It should return an Error! 12 // object if the validation fails. Don't `console.warn` or throw, as this! 13 // won't work inside `oneOfType`.! 14 customProp: function(props, propName, componentName) {! 15 if (!/matchme/.test(props[propName])) {! 16 return new Error('Validation failed!');! 17 }! 18 }! 19 },! 20 ...! 21 });!
React.PropTypes.element.isRequired! 4 },! 5 ! 6 render: function() {! 7 return (! 8 <div>! 9 {this.props.children} // This must be exactly one element or it will ! 10 throw.! 11 </div>! 12 );! 13 }! 14 ! 15 });!
// don't render anything, this is where we open the portal! 4 return <div/>;! 5 },! 6 ! 7 componentDidMount: function() {! 8 var node = this.getDOMNode();! 9 ! 10 // do the old-school stuff! 11 var dialog = $(node).dialog().data('ui-dialog');! 12 ! 13 // start a new React render tree with our node and the children! 14 // passed in from above, this is the other side of the portal.! 15 React.renderComponent(<div>{this.props.children}</div>, node):! 16 }! 17 });!
componentDidMount: function() {! 5 // store the node on the `this.node` so we can access elsewhere! 6 this.node = this.getDOMNode();! 7 var dialog = $(this.node).dialog().data('ui-dialog');! 8 ! 9 // moved this code so we can call it in other places! 10 this.renderDialogContent();! 11 },! 12 ! 13 // add this hook! 14 componentWillReceiveProps: function(newProps) {! 15 // its important to pass the new props in! 16 this.renderDialogContent(newProps);! 17 },! 18 ! 19 renderDialogContent: function(props) {! 20 // if called from `componentWillReceiveProps`, then we use the new! 21 // props, otherwise use what we already have.! 22 props = props || this.props;! 23 ! 24 // the code that used to be in `componentDidMount`! 25 React.renderComponent(<div>{props.children}</div>, this.node):! 26 }! 27 });!
4 componentDidMount: function() {! 5 // ...! 6 // use `autoOpen` false so it doesn't automatically open and then! 7 // store the dialog on the component so we can use it elsewhere! 8 this.dialog = $(this.node).dialog({! 9 autoOpen: false,! 10 title: this.props.title,! 11 close: this.props.onClose! 12 }).data('ui-dialog');! 13 // ...! 14 },! 15 ! 16 // ...! 17 ! 18 renderDialogContent: function(props) {! 19 // ...! 20 React.renderComponent(<div>{props.children}</div>, this.node):! 21 ! 22 // after we've rendered the dialog, now we can call methods on it! 23 // via the props passed in like! 24 // `<Dialog open={this.state.dialogIsOpen} />`! 25 if (props.open)! 26 this.dialog.open();! 27 else! 28 this.dialog.close();! 29 }! 30 });!