必須返回有效的react元素或null。反應 - 終極版連接

我有這個組件：必須返回有效的react元素或null。反應 - 終極版連接

let Vepo = (props) => (
    <Container > 
    <Header style={styles.header}> 
     <Left> 
     <Button transparent> 
     </Button> 
     </Left> 
     <Body> 
     <Title style={styles.title}>Search</Title> 
     </Body> 
     <Right> 
     </Right> 
    </Header> 
    <Container style={styles.container}> 
     <ScrollView > 
     <Keywords /> 
     <Categories /> 
     </ScrollView> 
    </Container> 
    </Container> 
) 

Vepo = connect(
    null, 
    null 
)(Vepo) 

export default Vepo

但現在我需要實現ComponentDidMount由this example of using a higher order component那麼回事：

class Wrapper extends Component { 
     componentDidMount() { 
      this.props.getAllTehDatas(); 
     } 

     render() { 
      <WrappedComponent {..this.props} /> 
     } 
    } 

    const mapStateToProps =() => ({ 

    }); 

    const mapDispatchToProps = { 
     getAllTehDatas 
    }; 

export default connect(mapStateToProps, mapDispatchToProps)(Wrapper);

我應該能夠做到這一點：

let Vepo = (props) => (
    <Container > 
    <Header style={styles.header}> 
     <Left> 
     <Button transparent> 
     </Button> 
     </Left> 
     <Body> 
     <Title style={styles.title}>Search</Title> 
     </Body> 
     <Right> 
     </Right> 
    </Header> 
    <Container style={styles.container}> 
     <ScrollView > 
     <Keywords /> 
     <Categories /> 
     </ScrollView> 
    </Container> 
    </Container> 
) 

class Wrapper extends Component { 
    componentDidMount() { 
     console.log("loaded") 
    } 

    render() { 
     <Vepo /> 
    } 
} 

Vepo = connect(
    null, 
    null 
)(Wrapper) 

export default Vepo

但我得到這個錯誤：

Wrapper.render(): A valid react element or null must be returned. You may have returned undefined, and array of some other object.

我哪裏錯了？

來源

2017-04-16 BeniaminoBaggins

這是關於包裝的渲染，你放棄了它的回報。將渲染更改爲：

render() { 
    return <Vepo/> 
}

來源

2017-04-17 03:28:51

必須返回有效的react元素或null。反應 - 終極版連接

回答

相關問題