React内置属性

1. 适用于通用内置组件

• children
  

  console.log('', nodeRef.current.children)
    // HTMLCollection(2)
    //  0: div
    //  1: input
    ...
    <div ref={nodeRef}> 
      <div> 1123 </div>
      <input type="text" placeholder="t-11222" />  
    </div>

• dangerouslySetInnerHTML
  

   <div dangerouslySetInnerHTML={{__html:'<div><span style="color:red;line-height:40px;">get it more dangerously</span></div>'}}></div>

• ref
  

  //函数组件
    import React,{useRef} from 'react'
  
    const YourComponent = ()=>{
      let formRef = useRef()
      const getFromData = ()=>{
        console.log('formData', formRef.current) // form 的 子组件(表单组件，包括任意位置组件)
      }
      return (
        <form ref ={formRef}>...</form>
      )
    }
  
    // 类组件
    import React,{createRef} from 'react'
  
    class YourComponent extends React.Component {
      constructor(props){
        super(props)
        this.formRef = createRef()
      }
      getFromData = ()=>{
        console.log('formData', this.formRef.current) // form 的 子组件(表单组件，包括任意位置组件)
      }
  
      render(){
        return (
          <form ref={this.formRef}>...</form>
        )
      }
    }

• ref回调函数
  

  
    // ref回调函数
    // 每次重新渲染ref 回调函数都是一个新的函数， 上一个函数的入参为 null 调用，当前函数的入参为当前DOM 节点
    const formRefCall = ()=>{
      console.log('ref-r', aa)
      formRef.current = aa
    }
    // log  
    // ref-r null [上一个函数]
    // ref-r <form id=​"form-single">​…​</form>​ [当前函数]
    ...
    <form id=​"form-single" ref={formRefCall}>
      ...
      <button type="submit">点我提交</button>
    </form>

• style
  

    // 小驼峰命名法
  
    
  ...
  
    // 
    const styles = {
      backgroundColor: 'red', lineHeight: '24px', fontSize: 18, // React 自动添加属性为 font-size: 18px;
      fontWeight: 600, // 数值属性 React 不做处理 font-weight: 600
    }
    
   ...

• suppressContentEditableWarning
  

  
    // suppressContentEditableWarning = true
    // React 将不对 具有 child 和 contentEditable={true} 的组件进行警告

• suppressHydrationWarning
  

  
    // suppressHydrationWarning = true 如果使用服务端渲染
    // React 将不对 服务端和客户端的渲染不同内容 进行警告