在 react v0.13 中重做 css-layout jsfiddle

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 provides convenience wrappers around React.createElement for DOM components (Source)

所以你可以使用 React.createElement 但对于常规 html 元素，使用 JSX 更容易：只需将 <View /> 替换为直接 <div />（和带跨度的文本）

然后您只需将 React.renderComponent()（已弃用）重命名为 React.render() 即可。

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

在 react v0.13 中重做 css-layout jsfiddle

Redoing css-layout jsfiddle in react v0.13

reactjs

react-jsx