#15 高阶组件 + context
-
1
const makeProvider = (data) => (Post) => { class NewComponent extends Component { static childContextTypes = { data: PropTypes.any.isRequired } constructor() { super(); this.state = { data: data } } getChildContext() { return this.setState({ data: this.state.data }) } render() { return ( <Post {...this.props} /> ) } } return NewComponent; }
请教一下为什么一直超时呢?
Time Limit Exceeded
-
0
@贾维尔麦基 应该是getChildContext的问题,这里面是要返回一个{data:this.state.data},你这边怎么又setState一次。。。
-
0
const makeProvider = function(obj){ return function(Post){ return class Post2 extends Component { static childContextTypes = { data: PropTypes.object } getChildContext (){ return {data: obj} } render (){ return ( <Post /> ) } } } }
-
0
const makeProvider = (data)=>(WrappedComponent)=>{ class NewComponent extends Component{ static childContextTypes ={ data : PropTypes.object } constructor(){ super(); this.state ={ data : data } } getChildContext(){ return {data: this.state.data} } render(){ return( <WrappedComponent /> ) } } return NewComponent }
-
0
const makeProvider = data => WrappedComponent => { class NewComponent extends React.Component { constructor () { super() this.state = { data: data } } static childContextTypes = { data: PropTypes.string } getChildContext () { return { data: this.state.data } } render () { return ( <WrappedComponent {...this.props} /> ) } } return NewComponent }
-
0
const makeProvider = (data) => (WrappedComponent) => { return class extends Component { //使用匿名类 static childContextTypes = { data: PropTypes.any.isRequired } getChildContext() { return { data } //使用ES6对象属性简写 } render() { return <WrappedComponent /> } } }
-
1
const makeProvider = data => WrappedComponent => class extends Component { static childContextTypes = { data: PropTypes.any } getChildContext() { return {data}; } render() { return (<WrappedComponent />); } }
-
0
const makeProvider = data => TComponent => { class WithProviderComponent extends Component { static childContextTypes = { data: PropTypes.any } getChildContext() { return { data } } render() { return <TComponent {...this.props} /> } } return WithProviderComponent }
-
0
const makeProvider = /* TODO */ (obj) => (Com) => class extends Component { static childContextTypes = { data: PropTypes.any.isRequired } constructor () { super() this.state = { data: obj } } getChildContext () { return { data: this.state.data } } render () { return <Com data={this.state.data}/> } }
-
0
主要是理解高阶组件其实就是包裹了一个组件的组件,然后context不是说通过继承来共享的,而是通过包裹来共享的。
const makeProvider = (any_arg) => { return (AComponent) => { class WrapperComponent extends Component { static childContextTypes = { data: PropTypes.object } getChildContext () { return { data: any_arg } } render() { return (<AComponent />) } } return WrapperComponent; } }
-
0
const makeProvider = data => WrapperComponent => { return class NewComponent extends Component { static childContextTypes = { data: PropTypes.object.isRequired, } getChildContext() { return { data, } } render() { return ( <div> <WrapperComponent /> </div> ) } } }
-
0
<code>
const makeProvider = (data) => (WrapComponent) => {
return class extends Component {
static childContextTypes = {
data: PropTypes.object
}
constructor() {
super()
this.state = {data}
}
getChildContext () {
return { data: this.state.data }
}
render() {
return <WrapComponent />
}
}
}</code>
-
0
const makeProvider = data => Comp => class extends Component { static childContextTypes = { data: PropTypes.any } getChildContext () { return { data } } render () { return <Comp {...this.props}/> } }
-
0
@贾维尔麦基 getChildContext()要返回的是一个对象不是一个函数,改成{data:this.state.data}就可以了