react总结(基础入门)

1.React封装一个组件

index.js是入口文件。 引入App.js这个组件，App.js再引入SonComponent.js这个公共组件。App.js会传递数据给SonComponent.js，这个数据是一个数组，SonComponent.js在constructor中接收到数据后进行map遍历后输出。 在遍历生成的li中记得加key。

• index.js

import React from "react";
import ReactDOM from "react-dom";
import App from './App';
ReactDOM.render(<App />, document.getElementById("root"));

• App.js

import React, { Component } from "react";
import SonComponent from './SonComponent';


class App extends React.Component {
  render() {
    const posts = [
      {id: 1, content: 'Welcome to learning React!'},
      {id: 2, content: 'You can install React from npm.'}
    ];
    return (
      <div>
        <SonComponent posts={posts}></SonComponent> 
      </div>
    )
  }

}

export default App;

• SonComponent.js

import React, { Component } from "react";


class SonComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    render() {
        const content = this.props.posts.map(item => 
            <li key={item.id.toString()}>{item.content}</li>    
        )
        return (
            <div>
                <ul>
                    {content}
                </ul>
            </div>
        )
    }
}

export default SonComponent;

2. react中事件绑定的三个方法

• 方法1
  在constructor构造函数内 this.handleEvent = this.handleEvent.bind(this)

• 方法2
  在操作事件内使用es6方法 onChange={e => this.handleEvent(e)}

• 方法3
  事件使用es6的箭头函数 handleEvent = (e) => { e.preventDefault() }