Success! With some javascript hacking I have managed to get it working. I
can retrieve props and state and also set state from an onClick callback.
Below is my contrived solution
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public class AbstractClassicComponent {
protected native void setState(BaseState state);
protected native void setState(BaseState state, ReactCallback callback);
protected native void forceUpdate(ReactCallback callBack);
protected native void replaceState(BaseState nextState, ReactCallback
callback);
protected native boolean isMounted();
protected native <P extends BaseProps> P getProps();
protected native <S extends BaseState> S getState();
}
@JsType(namespace = JsPackage.GLOBAL)
public class CustomClassicComponent extends AbstractClassicComponent {
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class Props extends BaseProps {
public String aProp;
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
private static class State extends BaseState {
public String aStateVar;
}
public BaseState getInitialState() {
State s = new State();
s.aStateVar = "Initial Value";
return s;
}
public ReactElement<?> render() {
Props ourProps = getProps();
State ourState = getState();
String description = "Click me (state=" + ourState.aStateVar + ",
props=" + ourProps.aProp + ")";
MouseEventHandler clickedBtn = (e) -> {
State newState = new State();
newState.aStateVar = "Updated Value";
setState(newState);
};
return React.createElement("button", new HTMLProps().Title("Some
title").OnClick(clickedBtn), description);
}
}
public class ReactMain implements EntryPoint {
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
private static class StatelessProps extends BaseProps {
public String aProp;
}
@Override
public void onModuleLoad() {
initJS();
ClassicComponentClass<CustomClassicComponent.Props>
customClassicComponent =
React.createClass(GWTReact.makeSpec(new
CustomClassicComponent()));
StatelessComponent<StatelessProps> statelessComp =
(props)->{return React.createElement("div", null, "Stateless
component works " + props.aProp);};
StatelessProps fProps = new StatelessProps();
fProps.aProp = "Its a func prop";
CustomClassicComponent.Props classicProps= new
CustomClassicComponent.Props();
classicProps.aProp = "classic prop";
DOMElement<HTMLProps> div =
React.createElement("div", new HTMLProps().DefaultValue("ss"),
React.createElement("div", null,
React.createElement(statelessComp, fProps)),
React.createElement(customClassicComponent,
classicProps),
React.createElement("div", null, "An example")
);
ReactDOM.render(div, Document.get().getElementById("mainCont"));
}
private final native void initJS() /*-{
$wnd.GWTReact = {};
$wnd.GWTReact.makeSpec = function(componentObj) {
var prototype = componentObj.__proto__;
var spec = {
getState: function() {
return this.state;
}
,getProps: function() {
return this.props;
}
};
for (var p in prototype) {
if (prototype.hasOwnProperty(p) && p != 'constructor') {
spec[p] = prototype[p];
}
}
return spec;
}
}-*/;
}
The trick is the makeSpec function. I am going to work fleshing out the API so
I can build a real test application. I can also improve how you work with state
and props.
--
You received this message because you are subscribed to the Google Groups "GWT
Contributors" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-web-toolkit-contributors+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-web-toolkit-contributors/86eb8364-da20-430c-abe5-830fbc8637fc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
