首页 > 代码库 > React 组件基本使用

React 组件基本使用

2024-09-16 03:50:39   219人阅读

　　React 提供了两种方式来声明组件，一种是函数式，一种是类式，就是用es6 class, 我们所有的组件都继承自React.Component.

　　函数式很简单，就像我们平常写函数一个，接受一个参数作为输入，然后进行相应的输出，只不过它输出的jsx.

// welcome 函数式组件。
function Welcome(props) {  
    return  <h1> {props.name}</h1>  
}

　　类式 写法如下：

class Welcome extends React.Component {
  render() {
    return  <h1> {this.props.name}</h1>
  }
}

　　声明组件以后，怎么使用这个组件？ 如果组件还要接受参数，怎样进行参数传递？把组件名放到一个自闭合html 标签中，进行调用，传参则像是给html标签写属性,属性名 = 属性值，如name =”Jason” , 组件内部的props 则把这些属性组合在一起形成对象｛name: “jason”｝

<Welcome name="Jason" /> // 标签一定要闭合，就是后面的/不能忘记

　　通过调用，我们返回了 <h1> Jason</h1>, 很像html 代码，其实它是 React 所说的虚拟DOM,  并不是真实的DOM, 我们要把虚拟DOM 渲染成真实的DOM，才能显示到页面中，这需要用到ReactDOM的render 方法，它接受的第一个参数，就是虚拟DOM， 第二个参数就是我们要把DOM 渲染到什么地方。

ReactDOM.render(
    <Welcome name="Jason" />,
    document.getElementById(‘root‘)
);

　　这就是react组件最简单的使用，现在写一个html 页面，引入react reactdom 等，可以看到页面中输入了Jason

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      
      // welcome 函数式组件。
      function Welcome(props) {  
        return  <h1> {props.name}</h1>  
      }

      // 渲染成真实的DOM
      ReactDOM.render(
        <Welcome name="Jason" />,
        document.getElementById(‘root‘)
      );
    </script>
  </body>
</html>

　　为了调用简单，我们可以把组件的调用赋值给一个变量，然后在 render 方法中直接使用这个变量作为第一个参数, 这里对name 参数进行了更改，以便看出区别。可以看到页面中输出sam

//  组件的调用结果赋值给一个变量
const nameElem = <Welcome name="sam" /> 
ReactDOM.render(
  nameElem,  //  在render 中直接使用变量
  document.getElementById(‘root‘)
);

　　有时我们还要把小的组件进行组合，形成大的组件，这里也可以用函数声明的方式

//  组件的组合
function App() {
  return (
    <div>
      <Welcome name="Sam" />
      <Welcome name="Jason" />
    </div>
  );
}

　　对于这样的组件，在调用render 方法进行渲染的时候，要对函数名用html 标签进行包裹，形成一个自闭合标签。

ReactDOM.render(
  <App />,
  document.getElementById(‘root‘)
);

　　script 内容更改如下，可以看到页面上输出sam jason

    <script type="text/babel">
      
      // welcome 类式组件。
      class Welcome extends React.Component {
        render() {
          return  <h1> {this.props.name}</h1>
        }
      }
      //  组件的组合
      function App() {
        return (
          <div>
            <Welcome name="Sam" />
            <Welcome name="Jason" />
          </div>
        );
      }
 
    ReactDOM.render(
      <App />,  //自闭合标签
      document.getElementById(‘root‘)
    );

    </script>

 

React 组件基本使用


联系
我们