如何在不使用JSX的情况下在React Native中制作组件

How do I make components in React Native without using JSX?

本文关键字：Native React 组件 情况下 JSX      更新时间：2023-09-26

使用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不是函数"。

我尝试联系打包程序，它说它在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的解决方案是正确的，但我们可以使用工厂使其更可读：

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"
          )
        )
      )
    );

  }
});

我知道最初的问题已经有一段时间了，但如果其他人感兴趣，你可以查看我们在Uqbar:上制作的库

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

它非常易于使用，并且提供了比React开箱即用界面更干净的界面。

相关文章：