はJSXを返すコンポーネント機能に反応に使用した場合エラーが発生ES6クラスのメソッドをレンダリングコンポーネント

Question

に反応Iは、以下に示すようにJSXを返す関数があります。私はES6クラスのレンダリングメソッド内で、この関数を呼び出す

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

をコンポーネント

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

    return struct(locals); 
    } 
} 

私は、コードを実行すると、私が取得エラー

エレメントタイプが無効である：（内蔵部品のための）予測文字列または クラス/関数（複合コンポーネント用）ですが、got：オブジェクトです。レンダリングを確認する メソッドはStruct

どのようにして結果をComponentクラスのレンダリング値としてレンダリングすることができますか？

Answer 1

反応成分ではなく反応成分を返しています。違いは要素がどのようにコンポーネントを作成するかを記述する要素であり、コンポーネントはインスタンス化されたクラスです。 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}/>; 
    } 
} 

Answer 2

まず、そのモジュールをクラスモジュールにインポートする必要があります。

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

次に、シンタックスシュガーであるJSXを返さなければならないレンダリング関数。 return文の前に中間メソッドをレンダリングメソッドに配置する必要があります。複数の要素がある場合はdivの中で囲む方が安全です。

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