向React提供原生Javascript对象

Feed native Javascript objects to React

本文关键字：Javascript 对象 原生 React      更新时间：2023-09-26

我在以下链接中发现了有趣的片段:https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html

文章描述了React如何在内部使用原生Javascript对象来构建树。
目前，我正在制作一个拖放编辑器，我想为它构建一个React组件树。理想情况下，我会构建一个嵌套的Javascript对象树，并在运行时将它们转换为组件树。

例如，如果我有一个这样的对象(来自前面添加的链接的片段): 
{
  type: Button,
  props: {
    children: 'OK!',
    color: 'blue'
  }
}

这是react内部计算的。我如何将这个对象(/对象树)立即提供给React?

我认为添加的片段是伪代码。下面的示例不起作用:

ReactDOM.render({
  type: Button,
  props: {
    children: 'OK!',
    color: 'blue'
  }
}, document.getElementById('root'));

您需要添加一个额外的属性作为安全措施，以避免在JSON中注入组件(不可能从JSON中创建所需的符号)。

在脚注中有解释:

所有的React元素都需要一个额外的$$typeof:在对象上声明的Symbol.for('react.element')字段的原因。在上面的例子中省略了它。这个博客条目使用元素的内联对象，让您了解正在发生的事情在下面，除非你添加$$typeof，否则代码不会按原样运行或更改代码以使用React.createElement()或JSX . 

const Button = ({ color, children }) => <button style={{ background: color }}>{children}</button>;
ReactDOM.render({
  $$typeof: Symbol.for('react.element'),
  type: Button,
  props: {
    children: 'OK!',
    color: 'blue'
  }
}, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

相关文章：