React组件的定义、渲染和传值总结

一、组件的定义

1、使用JavaScript函数定义 Welcome.js

import React from 'react';

function Welcome() {
  return (
    <div>我是一个组件</div>
  );
}

export default Welcome;

2、使用 ES6 class 定义 Welcome.js

import React from 'react';

class Welcome extends React.Component {
  render() {
    return (
      <div>我是一个组件</div>
    );
  }
}

export default Welcome;

二、组件的渲染

index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

三、复合组件

1、通过创建多个组件来合成一个组件

import React from 'react';

function Name(props) {
  return (
    <p>我是{props.name}</p>
  );
}

function Age(props) {
  return (
    <p>我{props.age}岁</p>
  );
}

function Sex(props) {
  return (
    <p>我是一个{props.sex}人</p>
  );
}

function Me() {
  return (
    <div>
      <Name name="海牛大大" />
      <Age age="22" />
      <Sex sex="男" />
    </div>
  );
}

export default Me;

2、渲染合成的组件

import React from 'react';
import ReactDOM from 'react-dom';
import Me from './Me';

ReactDOM.render(
  <Me />,
  document.getElementById('root')
);

运行结果：

四、组件之间的传值

1、父组件传给子组件

父组件通过自定义属性进行传值，这里以传 lastName 的值为例：

Parent.js

import React from 'react'
import Child from './Child'

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child lastName='Liu' />
      </div>
    )
  }
}

export default Parent;

子组件通过 this.props 获取，这里接收父组件传过来 lastName 的值

Child.js

import React from 'react'

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  render() {
    return (
      <div>
        <h1>My lastname is {this.props.lastName}</h1>
      </div>
    )
  }
}

export default Child;

渲染父组件：

ReactDOM.render(
  <div><Parent /></div>,
  document.getElementById('root')
);

运行结果：

2、子组件传给父组件

利用回调来完成，父组件传递一个函数，这里以传 fn 为例

import React from 'react'
import Child from './Child'

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fontColor: ''
    }
  }

  render() {
    return (
      <div>
        <h1 style={{color:this.state.fontColor}}>标题</h1>
        <Child fn={(e) => this.setState({fontColor: e})} />
      </div>
    )
  }
}

export default Parent;

子组件将要传递的值作为参数，并调用父组件传递的函数，这里将 red 作为参数调用

import React from 'react'

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

  render() {
    return (
      <div>
        <button onClick={(e) => this.props.fn('red')}>
          单击改变标题颜色
        </button>
      </div>
    )
  }
}

export default Child;

运行结果：

3、兄弟组件之间的传值

A子组件先传给父组件，父组件再传给B子组件