上一节:
下一节:

  React 组件

  • 定义和使用

    组件就像返回 HTML 元素的函数一样。
    组件是独立且可重用的代码位。 它们具有与 JavaScript 函数相同的作用，但是它们隔离工作并通过 render 函数返回 HTML。
    组件分为两种类型，即 Class 组件和 Function 组件，在本教程中，我们将集中讨论 Class 组件。
    注意，本教程 React 代码环境围绕 npm 的构建环境进行学习，如不懂可以先阅读 React 环境搭建这章进行了解学习

  • 创建一个 Class 组件

    创建 React 组件时，组件名称必须以大写字母开头。
    组件必须包含扩展的 React.Component 语句，该语句创建对 React.Component 的继承，并允许您的组件访问 React.Component 的函数。
    该组件还需要 render() 方法，该方法返回 HTML。
    创建一个名为 Car 的 Class 组件：
    index.js： 
    import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  render() {
    return <h2>嗨，我是一辆车！</h2>;
  }
}

ReactDOM.render(<Car/>, document.getElementById('root'));
    现在，您的 React 应用程序具有一个名为 Car 的组件，该组件返回一个 <h2> 元素。
    要在您的应用程序中使用此组件，请使用与普通 HTML 相似的语法：<Car/>。
    在“根(root)”元素中显示 Car 组件。
    运行结果如下：
    react

  • 创建一个 Function 组件

    这是与上面相同的示例，但是使用 Function 组件创建。
    Function 组件也返回 HTML，其行为与 Class 组件几乎相同，但是 Class 组件具有一些附加功能，在本教程中将首选使用。
    创建一个名为 Car 的 Function 组件：
    index.js： 
    import React from 'react';
import ReactDOM from 'react-dom';
function Car() {
  return <h2>嗨，我是一辆车！</h2>;
}
ReactDOM.render(<Car/>, document.getElementById('root'));
    同样，您的 React 应用程序具有 Car 组件。
    将 Car 组件称为普通 HTML（React除外，组件必须以大写字母开头）。
    在“根(root)”元素中显示 Car 组件。
    运行结果与上面一样：
    react

  • 组件构造器

    如果您的组件中有一个 Constructor() 函数，则在组件启动时将调用此函数。
    构造函数是您初始化组件属性的地方。
    在 React 中，组件属性应保持在一个称为状态的对象中。
    您将在本教程的后面部分详细了解状态。
    在构造函数中，还可以通过包含 super() 语句来尊重父组件的继承，该语句执行父组件的构造函数，并且您的组件可以访问父组件的所有功能（React.Component）。
    在 Car 组件中创建一个构造函数，并添加一个 color 属性：
    index.js： 
    import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "红色"};
  }
  render() {
    return <h2>嗨，我是一辆车！</h2>;
  }
}
ReactDOM.render(<Car/>, document.getElementById('root'));
    在 render() 函数中使用 color 属性：
    index.js： 
    import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "红色"};
  }
  render() {
    return <h2>嗨，我是一辆 {this.state.color} 车！</h2>;
  }
}

ReactDOM.render(<Car/>, document.getElementById('root'));
    运行结果如下：
    react

  • Props

    处理组件属性的另一种方法是使用 Props。
    Props 就像函数参数一样，您可以将它们作为属性发送到组件中。
    您将在下一章中了解有关 Props 的更多信息。
    使用属性将颜色传递给 Car 组件，然后在 render() 函数中使用它：
    index.js： 
    import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  render() {
    return <h2>嗨，我是一辆 {this.props.color} 车！</h2>;
  }
}

ReactDOM.render(<Car color="红色"/>, document.getElementById('root'));
    运行结果如下：
    react

  • 组件中的组件

    我们可以在其他组件内部引用这些组件。
    在 Garage 组件内使用 Car 组件：
    index.js： 
    import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  render() {
    return <h2>我是一辆车！</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>谁住在我的车库里？</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));
    运行结果如下：
    react

  • 文件中的组件

    React 是关于重用代码的全部，将某些组件插入单独的文件中可能很聪明。
    为此，请创建一个扩展名为 .js 的新文件，并将代码放入其中：
    请注意，该文件必须从导入 React 开始（与之前一样），并且必须以语句 export default Car; 结尾。
    这是新文件，我们将其命名为 "App.js"：
    App.js： 
    import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>嗨，我是一辆车！</h2>;
  }
}

export default Car;
    为了能够使用 Car 组件，您必须在应用程序中导入文件。
    现在，我们在应用程序中导入 "App.js" 文件，并且可以像在此处创建汽车组件一样使用 Car 组件。
    index.js： 
    import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';

ReactDOM.render(<Car />, document.getElementById('root'));
    运行结果如下：
    react

  • 相关页面

上一节:
下一节: