React.js final Exploration (Fri)

In react, everything is considered a component.

And the nesting of components is very common.

So some components are used as container components

Container components

React elements can contain child elements

Such as

1 //JSX 2 <  title= "title">3     <p> This is demo content</p>4</ezpanel >

In react, child elements can be accessed with This.props.children

Such as:

 1  var Ezpanel = React.createclass ({ 2   Render:function () { 3  return <  div  classname  = "Ez-panel"  >  Span style= "color: #008080;" >4   {This.props.children}  5 </ >   6   7  });

This allows the child elements written in React.render () to be placed in the appropriate container.

JSX Expandable Properties

1 //JSX 2 <  classname= "Ez-slider"  onmousedown= "{This.onmousedown}"  onmousemove= "{this.onmousemove}"  onmouseup= "{this.onmouseup}"> </div>

In Jsx, it is sometimes possible that our react element has a lot of attributes.

JSX provides a better feature to support this situation. You can set up a JSON object as a property bag.

Formats such as: <xx {...yy}></xx>

Such as:

1 //define Property bag2 var props = {3 className: "Ez-slider",4 OnMouseDown:this.onMouseDown,5 OnMouseUp:this.onMouseUp,6 OnMouseMove:this.onMouseMove7 };8  9 //Incoming Property bagTenvar rel =<Div{... props}></Div>;

That's all we have.

React.js final Exploration (Fri)