React专栏:React内置属性

React内置属性

  1. 适用于通用内置组件
名称描述建议或更多
children子组件[React节点,string|number|portal|null|undefinded|boolean|HtmlElement|Array<React节点>]只读
dangerouslySetInnerHTML渲染html原始字符串
refuseRef/createRef创建的对象ref={formRef}ref回调函数ref={refCallback:function}每次渲染以一个新的函数调用
style样式对象style={{color:'blue'}} React 会自动添加'px' (除数值属性外)
suppressContentEditableWarning[boolean]查看具体
suppressHydrationWarning[boolean]查看具体
  • 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 将不对 服务端和客户端的渲染不同内容 进行警告
暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇