React专栏：React内置属性

React内置属性

适用于通用内置组件

名称	描述	建议或更多
`children`	子组件[React节点，`string\|number\|portal\|null\|undefinded\|boolean\|HtmlElement\|Array<React节点>`]	只读
`dangerouslySetInnerHTML`	渲染html原始字符串
`ref`	useRef/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 将不对 服务端和客户端的渲染不同内容 进行警告

发送评论编辑评论

React内置属性

发送评论 编辑评论

发送评论编辑评论