React 组件



  • 定义和使用

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

    创建 React 组件时,组件名称必须以大写字母开头。
    组件必须包含扩展的 React.Component 语句,该语句创建对 React.Component 的继承,并允许您的组件访问 React.Component 的函数。
    该组件还需要 render() 方法,该方法返回 HTML
    创建一个名为 CarClass 组件:
    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