陣營分量函數返回應用於渲染ES6類的方法時JSX導致錯誤發生反應組分

我有一個返回JSX一個函數，如下所示：陣營分量函數返回應用於渲染ES6類的方法時JSX導致錯誤發生反應組分

function struct(locals) { 
    return (
     <View style={fieldsetStyle}> 
     {label} 
     {error} 
     {rows} 
     </View> 
    ); 
} 
label, error, and rows are functions that also return JSX.

我調用ES6類的呈現方法中的這個功能組件

class Component extends React.Component { 
    render() { 
    const locals = this.getLocals(); 

    return struct(locals); 
    } 
}

當我運行代碼，我得到錯誤

元素類型無效：預期字符串（內置組件）或類/函數（用於複合組件）但是得到了：object。檢查渲染方法Struct

如何從結構函數中獲取結果以呈現組件類的渲染返回值？

來源

2017-11-10 Tom Athens

您是否有充分的理由將此作爲單獨的功能？爲什麼你不把它變成一個'LocalsView'組件並且把它作爲prop來傳遞'locals'？ –

您正在返回反應成分，而不是反應成分。不同之處在於元素描述瞭如何創建組件，其中組件是實例類。您需要return React.createElement(Struct);或return <Struct/>。另外，您的locals變量實際上是一個props對象。所以你的代碼應該是這樣的：

function struct({locals}) { 
    return (
     <View style={fieldsetStyle}> 
     {label} 
     {error} 
     {rows} 
     </View> 
    ); 
} 

class Component extends React.Component { 
    render() { 
    const locals = this.getLocals(); 

    return <Struct locals={locals}/>; 
    } 
}

來源

2017-11-10 21:53:47 Kyle

謝謝凱爾，那個伎倆。 –

首先，你必須把這個函數作爲ES模塊導入到你的類組件中。

import { struct } from '..path/to/struct';

然後你的渲染函數應該返回一些JSX，它是語法糖。你應該把你的中間變量放在render方法的return語句之前。如果您有多個元素，將其包裹在div中更安全。

render() { 
    const locals = this.getLocals(); 
    return (
     <div> 
     struct(locals); 
     </div> 
    ); 
    }

來源

2017-11-11 02:28:58

陣營分量函數返回應用於渲染ES6類的方法時JSX導致錯誤發生反應組分

回答

相關問題