溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
嘮叨幾句啦
在看程墨老師的深入淺出高階組件，開頭一點提了一個需要，創建兩個高階組件，一個能給傳入的元素自定義添加props，一個是刪除特定的props。我剛剛做了一下，發現高階組件需要區分好傳入的是class還是react element, 同時也需要注意好return回去的是啥。順便提一下高階組件的概念，就說一個函數，能夠接受一個組件作為參數，然后返回的時候，這個組件就帶有這個高階組件給的某些特性。我理解就跟掉泥坑了，得帶點土出來一個道理。
對比一下兩個組件，貼代碼時刻來啦
刪除屬性的高階組件
我們需要傳入任何組件和參數，都把user參數給刪除了，所以返回值是一個接收props屬性的函數。
import React from "react"
function removeUserProp(WrappedComponent) {
return function newRender(props) {
const {user, ...otherProps} = props;// 刪除user這個屬性值
return <WrappedComponent {...otherProps} />
}
}
export default removeUserProp
使用的時候
const RemoveComponent = removeUserProp(reactComponentClass)({user: "aa"});// 這里返回的是一個react component
render () {
return <div>
{RemoveComponent}
</div>
}
增加屬性的高階組件
import React from "react"
const addNewProps = function (WrappedComponent, newProps) {// 接收的是一個class作為參數，返回一個class
return class WrappingComponent extends React.Component {
render () {
return <WrappedComponent {...this.props} {...newProps}/>
}
}
}
export default addNewProps
使用的時候,返回值是class，所以要用<ReactClassName/>轉換成可以渲染的react組件
const AddUserComponent = addNewProps(SampleComponent, {user: "aa"})
render () {
return <AddUserComponent />
}
完整的使用的例子代碼：
import React from "react"
import addNewProps from './addNewProps'
import removeUserProp from './removeUserProp'
class SampleComponent extends React.Component {
constructor(props) {
console.log(props)
super(props)
}
render () {
console.log(this.props)
return <div>
{
this.props.user ? <p>哈哈哈</p> : <p>哈哈哈2</p>
}
</div>
}
}
class Test extends React.Component {
render () {
var obj = {aa: "aa"}
const AddUserComponent = addNewProps(SampleComponent, {user: "aa"})
const RemoveUserComponent = removeUserProp(SampleComponent)({user: "aa"})
return <div>
<AddUserComponent />
{RemoveUserComponent}
</div>
}
}
export default Test
一點點小收獲就是明白了高階組件要看清楚輸入輸出。class跟react element的區別。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
