Reactjs Introduction to Combat (iii)----components

Owner "" Passed props

This is the default point of the component itself

Key "" cannot be without, in the case of reuse

Components: Examples

<!--Input: Props&State output: HTML-varLikebutton =React.createclass ({getinitialstate:function () {return{liked:false}; }, Handleclick:function (Event){                     This. SetState ({liked:! This. state.liked}); }, Render:function () {varText = This. state.liked?' like':'haven\ ' t liked'; return(                    <p onclick={ This.handleclick}>You {text} This.                    Click to toggle. </p>                    );                        }            }); Reactdom.render (<likebutton/>,document.getelementbyid ('Example')            )

Composite components:

"Inherits small inheritance

"Combines things with small things.

<div id="Example"></div> <script type="Text/babel">//set the objects to be blended            varSetintervalmixin ={componentwillmount:function () { This. intervals = []; }, Setinterval:function () { This. Intervals.foreach (clearinterval); }, Componentwillunmount:function () { This. Intervals.foreach (clearinterval);                        }            }; //The main components            varTicktock =React.createclass ({mixins:[setintervalmixin], getinitialstate:function () { return{seconds:0}; }, Componentdidmount:function () { This. SetInterval ( This. Tick, +); }, Tick:function () { This. setState ({seconds: This. state.seconds+1}); }, Render:function () {return(                    <p>React has been running for{ This. state.seconds} seconds. </p>                    );                        }            }); Reactdom.render (<ticktock/>, document.getElementById ('Example')            ); </script>

Reactjs Introduction to Combat (iii)----components