Question

因此，我正在学习的教程中，讲师分享了两种创建HOC的方法

第二种包装组件/容器的方法，例如

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classes from './Person.css';
import withClass from '../../../hoc/withClass';
import Aux from '../../../hoc/Aux';

class Person extends Component {
    constructor( props ) {
        super( props );
        console.log( '[Person.js] Inside Constructor', props );
    }

    render () {
        console.log( '[Person.js] Inside render()' );
        return (
            <Aux>
                <p onClick={this.props.click}>Im {this.props.name} and I am {this.props.age} years old!</p>
                <p>{this.props.children}</p>
                <input type="text" onChange={this.props.changed} value={this.props.name} />
            </Aux>
        )
    }
}
export default withClass(Person, classes.Person);

我们的withClass HOC看起来像这样

 import React, { Component } from 'react';

 const withClass = (WrappedComponent, className) => {
   console.log("this is wrapped component" + WrappedComponent)

   return (props) => (
        <div className={className}>
           <WrappedComponent {...props} />
      </div>
    )
}

现在我们在这里做类似<WrappedComponent {...props} />

教练说

“我们仍然会收到道具，但是它无法将道具传递到DOM的最终位置->道具从App传递到Person.js-> myWithClass（---）会破坏道具。并且，为了显示它，我们将执行类似使用{... props}->的操作，该语法只是意味着在获得道具时传递道具，不对其进行任何操作，因此可以修复我们的道具。

[次要问题]

这是否意味着，如果我们使用myWithClass（App..js，Classes.App），道具会坏掉吗？如果是，那怎么能

返回（道具）会得到那些道具吗？

还使用传播算子进行复制吗？所以{... props}只是复制道具？那些复制的道具有效，但实际道具无效？

[主要问题] 有人可以向我详细解释我们为什么这么做吗？

了解反应中的包装HOC

0 个答案: