如何在React Native中制作组件而不使用JSX？

Question

使用React Native的规范方式似乎是使用JSX：

render: function() {
  var movie = MOCKED_MOVIES_DATA[0];
  return (
    <View style={styles.container}>
      <Text>{movie.title}</Text>
      <Text>{movie.year}</Text>
      <Image source={{uri: movie.posters.thumbnail}} />
    </View>
  );
}

我该如何仅使用JavaScript来完成这个操作？通常在普通的React中，React.createElement('div')可以作为JSX的替代方法，但是尝试运行我的iOS React Native应用程序时出现错误“null不是一个函数”。

- André Staltz

---

你看过将JSX编译为纯JS的结果吗？那应该能给你想要的答案。 - Justin Niessner

从JSX到在React Native iOS项目中运行的JS，这对我来说是一个透明的操作。我不知道如何仅获取JSX到JS编译步骤。 - André Staltz

Answer 1

我尝试联系打包工具，它监听8081端口并且正在处理index.ios.bundle的请求。

于是我在浏览器中输入了这个网址：http://localhost:8081/index.ios.bundle

在返回的捆绑包中，我找到了：

var wazoo = React.createClass({displayName: "wazoo",
  render: function() {
    return (
        React.createElement(View, {style: styles.container}, 
          React.createElement(ScrollView, null, 
            React.createElement(View, null, 
                React.createElement(Text, {style: styles.welcome}, 
                  "Wazoo"
                ), 

等等，看起来 View、ScrollView 等都像是在 Web React 中通常定义的组件，上面的代码是JSX的JS等价代码。

- Daniel Earwicker

---

这个适用于字符串吗？就像这里：https://dev59.com/_JHea4cB1Zd3GeqPrJW8 - Ben Taliadoros

我看到这是React.createElement。 - dclaudiud

Answer 2

Daniel Earwicker的解决方案是正确的，但是我们可以使用工厂方法使其更易读：

var View       = React.createFactory(React.View);
var ScrollView = React.createFactory(React.ScrollView);
var Text       = React.createFactory(React.Text);

var wazoo = React.createClass({displayName: "wazoo",
  render: function() {

    return View({style: styles.container}, 
      ScrollView(null, 
        View(null, 
          Text({style: styles.welcome}, 
            "Wazoo"
          )
        )
      )
    );


  }
});

- Sava Jcript

Answer 3

我知道原问题已经过去了一段时间，但如果有其他人感兴趣，可以查看我们在Uqbar制作的库：

https://www.npmjs.com/package/njsx

它非常易于使用，提供了比React开箱即用界面更清晰的界面。

- Nicolás Scarcella