react学习(一)
<script src="react.js"></script> <script src="react-dom.js"></script> <script src="babel.min.js"></script> JSX<div id="example"></div> <script type="text/babel"> ReactDOM.render( <span>Hello React!</span>,document.getElementById('example') ); </script>
React 组件语法<div id="example"></div> <script type="text/babel"> class MyTitle extends React.Component { render() { return <h1>Hello World</h1>; } }; ReactDOM.render( <MyTitle/>,document.getElementById('example') ); </script> 或者: <script type="text/babel"> var MyTitle = React.createClass({ render () { return <h1>Hello World2</h1> } }); ReactDOM.render( <MyTitle/>,document.getElementById('example') ); </script>
组件的参数<div id="example"></div> <script type="text/babel"> class MyTitle extends React.Component { render() { return <h1 style={{color: this.props.color}}>Hello World</h1>; } }; ReactDOM.render( <MyTitle color="red" />,document.getElementById('example') ); </script>
组件的状态 this.state实例一<div id="example"></div> <script type="text/babel"> class MyTitle extends React.Component { constructor(...args) { super(...args); this.state = { name: '访问者' }; } handleChange(e) { let name = e.target.value; this.setState({ name: name }); } render() { return <div> <input type="text" onChange={this.handleChange.bind(this)} /> <p>你好,{this.state.name}</p> </div>; } }; ReactDOM.render( <MyTitle/>,document.getElementById('example') ); </script> 实例二<div id="example"></div> <script type="text/babel"> class MyTitle extends React.Component { constructor(...args) { super(...args); this.state = { text: 'World',isClicked: false }; } handleClick() { let d = new Date(); let time = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'; let isClicked = !this.state.isClicked; console.log(isClicked); this.setState({ isClicked: isClicked,text: isClicked ? time : 'World' }); } render() { return <h1 onClick={this.handleClick.bind(this)}> {'Hello ' + this.state.text} </h1>; } }; ReactDOM.render( <MyTitle/>,document.getElementById('example') ); </script> React 组件的生命周期componentWillMount():组件加载前调用 实例一<div id="example"></div> <script type="text/babel"> class MyList extends React.Component { constructor(...args) { super(...args); this.state = { loading: true,error: null,data: null }; } componentDidMount() { const url = 'https://api.github.com/search/repositories?q=javascript&sort=stars'; $.getJSON(url) .done( (value) => this.setState({ loading: false,data: value }) ).fail( (jqXHR,textStatus) => this.setState({ loading: false,error: jqXHR.status }) ); } render() { if (this.state.loading) { return <span>Loading...</span>; } else if (this.state.error !== null) { return <span>Error: {this.state.error}</span>; } else { /* 你的代码填入这里 */ return ( <div> <p>API 数据获取成功</p> <p>改写代码,将结果显示在这里</p> </div> ); } } }; ReactDOM.render( <MyList/>,document.getElementById('example') ); </script> 实例二<div id="example"></div> <script type="text/babel"> var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 }; },componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this),100); },render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } }); ReactDOM.render( <Hello name="world"/>,document.getElementById('example') ); </script> 为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。 实例三:组件的嵌套<div id="example"></div> <script type="text/babel"> var Search = React.createClass({ render: function () { return ( <div> {this.props.searchType}: <input type="text" /> <button>Search </button> </div> ); } }); var Page = React.createClass({ render: function () { return ( <div> <h1>Welcome!</h1> <Search searchType = "Title" /> <Search searchType = "Content" /> </div> ); } }); ReactDOM.render( <Page/>,document.getElementById('example') ); </script> ref有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性 实例:<div id="example"></div> <script type="text/babel"> var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); },render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }); ReactDOM.render( <MyComponent />,document.getElementById('example') ); </script> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |