Question

我正在尝试在json中表示DOM并在此页面上遇到React。

https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

有什么办法，我们可以使用下面的多层DOM表示来渲染组件吗？我尝试了很多方法，但还没有成功！

const DeleteAccount = () => ({
  type: 'div',
  props: {
    children: [{
      type: 'p',
      props: {
        children: 'Are you sure?'
      }
    }, {
      type: DangerButton,
      props: {
        children: 'Yep'
      }
    }, {
      type: Button,
      props: {
        color: 'blue',
        children: 'Cancel'
      }
   }]
 }
});

我想我不是为了它的目的而试图使用React，但是，如果我可以将这个DOM表示用于我的简单静态HTML字符串，那将会很棒。

另外，我还不明白它是怎么写的。是ES6吗？

JS小提琴 - https://jsfiddle.net/midhunanew/Lszmmsr1/2/

Answer 1

这是JSX语法。这可以通过tranpiler转换为JavaScript语法（例如Babel。）

如果您想使用（或阅读）javascript语法进行编码（不推荐），可以使用babel playground进行试用。

例如，如果您的代码是，

onDestroy()

在变相之后你会得到，

var Ele = React.createClass({
  render: function() {
    return (
      <div>hello world</div>
    );
  }
})
ReactDOM.render(<Ele />, document.getElementById('test'));

您可以更轻松地编写JSX结构并使用此操场来转换它们。

希望这会有所帮助。：）

'use strict'; var Ele = React.createClass({ displayName: 'Ele', render: function render() { return React.createElement( 'div', null, 'hello world' ); } }); ReactDOM.render(React.createElement(Ele, null), document.getElementById('test'));的更新。这是Arrow Expression。基本上它是另一种匿名函数格式。（不会混淆() => {}）

React - 从简单的对象树创建dom

1 个答案: