React的内容分发 refs高阶组件
begin enjoy👇

四 React

内容分发

默认内容分发

  • props.children对组件内已有内容进行保留
class Home extends React.Component {
    render() {
        return <div>
            <h2>home</h2>
            {/* 使用默认内容分发 */}
            {this.props.children}
        </div>
        
    }
}

ReactDOM.render(<Home >
    {/* 设置分发内容 */}
    <h2>内容分发</h2>
</Home>, document.getElementById('root'));

指定内容分发

class Home extends React.Component {
    render() {
        return <div>
            <h2>home</h2>
            {/* 使用默认内容分发 */}
            {this.props.children}
            {/* 指定内容分发 */}
            {this.props.comp1}
            {this.props.comp2}
        </div>
    }
}
    {/* 设置指定分发内容 */}
ReactDOM.render(<Home  
    comp1={<div>内容1</div>} comp2={<div>内容2</div>}>
    {/* 设置默认分发内容 */}
    <h2>内容分发</h2>
</Home>, document.getElementById('root'));

refs

refs属性显露组件的DOM元素

何时使用 Refs

下面是几个适合使用 refs 的情况:

  1. 管理焦点,文本选择或媒体播放。
  2. 触发强制动画。
  3. 集成第三方 DOM 库。

避免使用 refs 来做任何可以通过声明式实现来完成的事情。

refs获取有两种方式

  1. React 16.3 版本之前使用回调函数方式
class Home extends React.Component{
    constructor(props){
        super()
        // 接收DOM对象
        this.input1 = null
    }
    render(){
        return <div>
            {/*回调函数方式获取ref*/}
            <input type="text" ref={el=>{this.input1 = el;}}/>
        </div>
    }
    componentDidMount() {
        console.log(this.input1)
    }
}
  1. React 16.3 版本使用的 React.createRef()
class Home extends React.Component{
    constructor(props){
        super()
        // 16.3版本使用
        this.input1 = React.createRef()
    }
    render(){
        return <div>
            <input type="text" ref={this.input1} />
        </div>
    }
    componentDidMount() {
        console.log(this.input1)
    }
}

非受控组件

非受控组件,表单数据将交由 DOM 节点来处理。非受控组件可以 使用 ref 来从 DOM 节点中获取表单数据。

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.input = React.createRef();
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.input.current.value);
        event.preventDefault();
    }

    render() {
        return (
        <form onSubmit={this.handleSubmit}>
            <label>
            Name:
            <input type="text" ref={this.input} />
            </label>
            <input type="submit" value="Submit" />
        </form>
        );
    }
}

高阶组件

高阶组件是参数为组件,返回值为新组件的函数。

//高阶函数
// 参数表示一个组件(首字线要大写)
function myHigerOrder(MyWrapped) {
    return class extends React.Component{
        constructor(props){
            super(props)
            this.state={
                msg:'hello'
            }
        }
        // 生命周期函数
        componentDidMount(){
            console.log('componentDidMount...')
        }
        show(){
            console.log('show...')
        }
        render() {
            return <MyWrapped show={this.show} msg={this.state.msg}/>
        }
    }
}
// 使用定义好的组件利用高阶组件的功能
const Hchild1= myHigerOrder(MyChild1)
const Hchild2= myHigerOrder(MyChild1)

posted @ Zycin (非转载 来自个人学习资料整理)