React-组件和props

 1、类组件

import React from 'react';
class ClassApp extends React.Component {
    constructor(props) {
        super(props);
        this.state={};
    }
    render() {
        return (
            

                
这是一个类组件
                
接收父组件传过来的值：{this.props.name}
            
        );
    }
}
export default ClassApp;

2、函数组件

import React from 'react';
function FuncApp(props) {
    return (
        

            
我是函数组件
            
接收父组件传过来的值：{props.name}
        
    );
}

3、组件样式控制

import './index.css';
function FuncApp(props) {
    return (
        

            
我是函数组件
            
接收父组件传过来的值：{props.name}
        
    );
}

// index.css
.info-box {
    color: skyblue;
    font-size: 25px;
}

4、React表单组件

React中的表单组件大致可分为两类：

• 受控组件：一般涉及到表单元素时我们才会使用这种分类方法。受控组件的值由props或state传入，用户在元素上交互或输入内容会引起应用state的改变。在state改变之后重新渲染组件，我们才能在页面中看到元素中值的变化，假如组件没有绑定事件处理函数改变state，用户的输入是不会起到任何效果的，这也就是“受控”的含义所在。
• 非受控组件：类似于传统的DOM表单控件，用户输入不会直接引起应用state的变化，我们也不会直接为非受控组件传入值。想要获取非受控组件，我们需要使用一个特殊的ref属性，同样也可以使用defaultValue属性来为其指定一次性的默认值。

//受控组件
this.state = {
    value: "默认值"
}
change(event) {
    this.setState({value: event.target.value})
}

    
    
 {this.state.value} 

 
// hooks写法
import { useState } from "react";
function App() {
  const [name, setName] = useState('')
  return (
    

       setName(e.target.value)} />
    
  );
}
export default App;
 
//非受控组件

5、React获取dom元素

        在react中操作dom，可以使用useRef钩子函数

（1）使用useRef创建ref对象，并于JSX绑定

import { useRef } from "react";
function App() {
  const inputRef = useRef(null)
  return (
    

      
      显示dom
    
  );
}
export default App;

（2）在DOM可用时，通过inputRef.current拿到DOM对象

const showDom = () => {
    console.log(inputRef.current);
}

6、props

（1）定义和使用props

        react中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的 

// 父组件
function App() {
  const name = '张三'
  return (
    

      
    
  );
}

// 子组件
function Son(props) {
  return (
    
{ props.name }
  )
}

（2）特殊的prop children（类似于Vue的插槽）

        当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容

// 父组件
function App() {
  const name = '张三'
  return (
    

      
        hello
      
    
  );
}

// 子组件
function Son(props) {
  return (
    
{ props.children }--{ props.name}
  )
}