YanoRyuichi.com/
Wiki
Blog
GitHub
Sandbox
開始行:
* HoC - Higher Order Components [#w82a57d9]
** HoF - Higher Order Functions [#od021eb5]
#sh(javascript){{{
// Result is [2,3,4]
[1,2,3].map((number)=>number+1)
// Note that you can extract the callback function and p...
function addOne(arg){
return arg+1
}
[1,2,3].map((number)=>addOne(number))
// or
[1,2,3].map(addOne)
}}}
#sh(javascript){{{
// We first define the function we will be using as an a...
const addOne = (arg)=>arg+1
// We than define our hof
const higherOrderFunction = (fn, arg) => fn(arg)*2
// The result will be 12
higherOrderFunction(addOne, 5)
}}}
** HoC - Higher Order Components [#xb8eb3e2]
#sh(javascript){{{
// A page component that just render text
const App = (props) => {
return (
<div className="App">
<h1>A component</h1>
</div>
);
};
export default App;
}}}
🠋🠋🠋
#sh(javascript){{{
export const withUser = (Component) => (props) => {
// Passing the user that you fetched
const currentUser = { authtenticated: true, email: "em...
return <Component currentUser={currentUser} {...props}...
};
}}}
#sh(javascript){{{
// A page component that just render text
const App = (props) => {
return (
<div className="App">
<h1>A component</h1>
<h2>User: {props.currentUser.email}</h2>
</div>
);
};
// Wrapping with withUser function
export default withUser(App);
}}}
** 参考 [#id2bfb50]
https://itnext.io/write-better-react-compose-multiple-fun...
終了行:
* HoC - Higher Order Components [#w82a57d9]
** HoF - Higher Order Functions [#od021eb5]
#sh(javascript){{{
// Result is [2,3,4]
[1,2,3].map((number)=>number+1)
// Note that you can extract the callback function and p...
function addOne(arg){
return arg+1
}
[1,2,3].map((number)=>addOne(number))
// or
[1,2,3].map(addOne)
}}}
#sh(javascript){{{
// We first define the function we will be using as an a...
const addOne = (arg)=>arg+1
// We than define our hof
const higherOrderFunction = (fn, arg) => fn(arg)*2
// The result will be 12
higherOrderFunction(addOne, 5)
}}}
** HoC - Higher Order Components [#xb8eb3e2]
#sh(javascript){{{
// A page component that just render text
const App = (props) => {
return (
<div className="App">
<h1>A component</h1>
</div>
);
};
export default App;
}}}
🠋🠋🠋
#sh(javascript){{{
export const withUser = (Component) => (props) => {
// Passing the user that you fetched
const currentUser = { authtenticated: true, email: "em...
return <Component currentUser={currentUser} {...props}...
};
}}}
#sh(javascript){{{
// A page component that just render text
const App = (props) => {
return (
<div className="App">
<h1>A component</h1>
<h2>User: {props.currentUser.email}</h2>
</div>
);
};
// Wrapping with withUser function
export default withUser(App);
}}}
** 参考 [#id2bfb50]
https://itnext.io/write-better-react-compose-multiple-fun...
ページ名:
