Question

我在以下链接中找到了有趣的摘录： 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？

我认为添加的代码段是伪代码。以下例子不起作用：

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

Answer 1

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

在foot note中解释：

所有React元素都需要额外的$$ typeof：为了安全起见，在对象上声明的Symbol.for（＆＃39; react.element＆＃39;）字段原因。在上面的例子中省略了它。此博客条目使用元素的内联对象可以让您了解正在发生的事情在下面，但代码将不会按原样运行，除非您添加$$ typeof 到元素，或更改代码以使用React.createElement（）或 JSX。

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

将原生Javascript对象反馈到React

1 个答案: