Question

我一直在玩这个jsfiddle，它展示了如何在js中使用css：http://jsfiddle.net/vjeux/y11txxv9/

在上面的jsfiddle中，React v0.13.1似乎不推荐使用以下三个函数。

var View = React.DOM.div;
var Text = React.DOM.span;
....
React.renderComponent(<div style={{width: '100vw', height: '100vh'}}><StyleDemo /></div>, document.body);

重构之后的代码似乎应该是React 0.13.1下面的代码：

var View = React.createElement('div');
var Text = React.createElement('span');
...
React.render(React.createElement("div", {style: {width: '100vw', height: '100vh'}}, React.createElement(StyleDemo, null)), document.body);

然而，上面的重构似乎并不起作用 - 重构后Chrome中没有任何渲染。由于我对JS和React的了解非常有限，我将非常感谢如何重构React 0.13.1的上述代码。

要在我的计算机上测试上述代码，我创建了index.html和test.js，两者都附在下面。

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
body {
    padding: 0;
    margin: 0;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: 100;
}
div, span {
    box-sizing: border-box;
    position: relative;
    border: 0 solid black;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-shrink: 0;
}

 </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>
  </head>
  <body>
  <script type="text/jsx" src="test.js"></script>
  </body>

</html>

test.js：

/** @jsx React.DOM */
var StyleSheet = { create: function(e) { return e; } };
var View = React.createElement('div');
var Text = React.createElement('span');



var StyleDemo = React.createClass({
  render: function() {
    return (
      <View style={styles.card}>
        <View style={styles.header}>
          <View style={styles.profilePicture} />
          <View style={{flex: 1}}>
            <Text style={styles.name}>Christopher Chedeau</Text>
            <Text style={styles.subtitle}>August 28 at 9:46pm &middot; Paris, France</Text>
          </View>
        </View>
        <View>
          <Text>'react js' search on Twitter returns 96 results in the past 24 hours. I declare bankruptcy!</Text>
          <Text style={styles.bling}>Like &middot; Comment &middot; Share</Text>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  card: {
    margin: 15,
    padding: 8,
    borderWidth: 1,
    borderColor: '#cccccc',
    borderRadius: 3
  },
  profilePicture: {
    width: 40,
    height: 40,
    backgroundColor: '#cccccc',
    marginRight: 8,
    marginBottom: 8,
  },
  name: {
    color: '#3B5998',
    fontWeight: 'bold',
    marginBottom: 2,
  },
  subtitle: {
    fontSize: 12,
    color: '#9197A3',
  },
  header: {
    flexDirection: 'row',
  },  
  bling: {
    marginTop: 8,
    color: '#6D84B4',
    fontSize: 13,
  },
});


React.render(React.createElement("div", {style: {width: '100vw', height: '100vh'}}, React.createElement(StyleDemo, null)), document.body);

Answer 1

React.DOM提供React.createElement周围的便利包装对于DOM组件（Source）

所以你可以使用React.createElement但是对于常规的html元素，使用JSX会更容易：只需用<View />替换<div />（和带有span的文本）

然后您只需要使用React.renderComponent()重命名React.render()（已弃用），它就可以。

新jsfiddle：http://jsfiddle.net/Lt5skeab/1/ （更新外部资源以使用React 0.13.1）

在v0.13中重做css-layout jsfiddle

1 个答案: