当前位置：首页 > news >正文

React 组件基础介绍

news 来源：原创 2025/6/9 14:49:12

基本概念：一个组件就是用户界面的一部分，可以有自己的逻辑和外观，组件之间可以互相嵌套、复用多次。每个组件就是一个首字母大写的函数，内部存放了组件的逻辑和试图UI，渲染组件只需要把组件当成标签 书写。App 可以视为最大的组件。

// function Button() {
//   return <button>点击我</button>;
// }

//箭头函数形式，与上面等价
const Button = () => {
  return <button>点击我</button>;
};

function App() {
  return (

    <div className="App">
      
      {/* 自闭和 */}
      <Button />

      {/* 成对标签 */}
      <Button></Button>

    </div>
  );
}

export default App;

三种基础样式控制方式

1、行内写法，注意react中，类名是className 而不是 class

//行内写法
function App() {
  return (
    <div className="App">
      <span style={{color: 'red',fontSize: '50px'}}>Hello World</span>
    </div>
  );
}

export default App;

//行内样式写法的一种优化方式
//把style抽离为一个对象变量

const style = {
  color: 'red',
  fontSize: '50px'
}

function App() {
  return (
    <div className="App">
      <span style={style}>Hello World</span>
    </div>
  );
}

export default App;

2、通过className类名控制，将样式抽离为.css文件

//App.js

import './index.css'

function App() {
  return (
    <div className="App">
      <span className="hello">Hello World</span>
    </div>
  );
}

export default App;



//index.css
.hello {
  color: red;
  font-size: 20px;
}

3、tailwindCSS