Переделка CSS-макет jsfiddle в реакции v0.13

я играл с этим jsfiddle, который показывает, как использовать CSS в ЯШ: http://jsfiddle.net/vjeux/y11txxv9/Переделка CSS-макет jsfiddle в реакции v0.13

В приведенном выше 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);

источник

2015-03-22 Sal

Ваш новый синтаксис не является правильным. Вы изменили его, чтобы создать только 'div' вместо' div' для каждого использования 'View'. Таким образом, это приведет к тому, что рендер не будет работать так, как ожидалось. – WiredPrairie

@WiredPrairie, как будет выглядеть новый синтаксис? Если вы хотите, вы можете написать его как ответ – Sal

@WiredPrairie, кажется, что React.createFactory (который является функцией типа React.DOM.div) вместо React.createElement исправит его. Если это то, что вы имеете в виду, вы должны опубликовать его как решение. – Sal

React.DOM обеспечивает удобство обертками вокруг React.createElement для компонентов DOM (Source)

Таким образом, вы можете использовать React.createElement, но и для обычных HTML элементов это проще с JSX: просто заменить <View /> с прямой <div /> (и текст с пролетом)

Тогда вам просто нужно переименовать React.renderComponent() (устаревшее) с React.render() и она работает.

Новый jsfiddle: http://jsfiddle.net/Lt5skeab/1/ (внешние ресурсы обновлены для использования React 0.13.1)

источник

2015-03-23 10:25:48 al8anp

это работает. Любопытно, но почему 'React.createFactory' обертки для' div' и 'span' не работают. Я создал другой jsfiddle (http://jsfiddle.net/Lt5skeab/2/) с вашими этими переменными. Проницательность в том, почему они не будут работать, будет очень полезна для лучшего понимания библиотеки. – Sal

Очевидно, 'React.createFactory' здесь, чтобы поддержать устаревший способ создания элементов, который должен был вызвать компоненты как функции. (источник: https://gist.github.com/sebmarkbage/ae327f2eda03bf165261) Поэтому, если у вас нет большого количества устаревшего кода (pre 0.12 code), который работает таким образом, я бы не потратил слишком много времени на 'React.createFactory'. – al8anp

ага, теперь имеет смысл. Большое вам спасибо за то, что указали мне в правильном направлении. – Sal

Переделка CSS-макет jsfiddle в реакции v0.13

ответ

Смежные вопросы