JSX nested custom componenet

[varadig]

Hello,

how can I create custom nested componenet with jsx?

for example I create ImageBox.hx with ImageBox class extends ReactComponenet and wanted to use this .componenet in another class like this:

override function render(){

              return  jsx('
                    <View style={styles.container}>
                        <Text style={styles.text}}>
                            Test
                        </Text>
                        <ImageBox/>
                    </View>
                ');
}

[kevinresol]

I think you are already writing the correct code

[varadig]

yes, but I got this error, so maybe I made something wrong

[varadig]

ImageBox.hx:

package view.componenets;
import haxe.macro.Expr;
import react.ReactMacro;
import react.ReactMacro.jsx;
import react.native.component.*;

import react.CoreReactComponenet;
class ImageBox extends CoreReactComponenet{
    public var text:String="asd";
    public function new() {
        super();
    }
    override function render() {
        return jsx("<Text>qweqwe</Text>");
    }
}

Kitar.hx:

package view;

import view.componenets.ImageBox;
import react.CoreReactComponenet;
import react.native.api.StyleSheet;
import react.ReactMacro;
import react.ReactComponent;
import react.ReactMacro.jsx;
import react.native.api.*;
import react.native.component.*;

@:expose('Kitar')
class Kitar extends CoreReactComponenet {

    static var styles = Main.styles;

    function new(props) {

        super(props);

        state = {
            scene: 0
        }
    }

    override function render() {
        function goto(i) setState({scene: i});
        return switch state.scene {
            default:
                jsx('
                    <View style={styles.container}>
                        <Text style={styles.text}>
                            Test
                        </Text>
                        <ImageBox/>
                    </View>
                ');
        }
    }
}

[varadig]

I think the problem is in the Kitar.js (39): return (React()).createElement((react_native_component_View().View),{ style : Kitar.styles.container},(React()).createElement((react_native_component_Text().Text),{ style : Kitar.styles.text},"Test"),{ "$$typeof" : $$tre, type : (view_componenets_ImageBox().default), props : { }});

// Class: view.Kitar

var $global = typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : this

$global.Object.defineProperty(exports, "__esModule", {value: true});

var __map_reserved = {};

// Imports

var $hxClasses = require("./../hxClasses_stub").default;
var $import = require("./../import_stub").default;
var $extend = require("./../extend_stub").default;
function react_CoreReactComponenet() {return require("./../react/CoreReactComponenet");}
function React() {return require("react");}
function react_native_component_View() {return require("react-native");}
function react_native_component_Text() {return require("react-native");}
function view_componenets_ImageBox() {return require("./../view/componenets/ImageBox");}
function Main() {return require("./../Main");}

// Constructor

var Kitar = function(props) {
    (react_CoreReactComponenet().default).call(this,props);
    this.state = { scene : 0};
}

// Meta

Kitar.__name__ = ["view","Kitar"];
Kitar.__super__ = (react_CoreReactComponenet().default);
Kitar.prototype = $extend((react_CoreReactComponenet().default).prototype, {
    render: function() {
        var _gthis = this;
        var $goto = function(i) {
            _gthis.setState({ scene : i});
        };
        var _g = this.state.scene;
        return (React()).createElement((react_native_component_View().View),{ style : Kitar.styles.container},(React()).createElement((react_native_component_Text().Text),{ style : Kitar.styles.text},"Test"),{ "$$typeof" : $$tre, type : (view_componenets_ImageBox().default), props : { }});
    }
});
Kitar.prototype.__class__ = $hxClasses["view.Kitar"] = Kitar;

// Init

// Statics

Kitar.styles = (Main().default).styles
Kitar.displayName = "Kitar"

// Export

exports.default = Kitar;

[varadig]

Ahhh its a genjs issue... if I build without genjs, there is no problem.

[kevinresol]

To use hxgenjs with react, you need to specify -D react_no_inline

[varadig]

Thank you, thats solve the problem!!!

[kevinresol]

This is due to some "hacks" inside the haxe-react library which doesn't work well with hxgenjs