作为 javascript 函数参数传递的 html 标记的对象类型

Question

我是 javascript 新手并做出反应。在 React 中，我们看到如下示例代码：

     ReactDOM.render(
      <h1> Hello, world! </h1>,
      document.getElementById('example')

这里是 ReactDOM.render accetps '

你好，世界！

' 作为第一个参数。

我尝试了以下测试代码，警告框显示'[object Object]'。如果我使用'typeof var1'作为警报（...），我只会得到'object'。这个对象的确切类型是什么？如何调试和查看它的详细信息？

    function mytest(var1, var2) {
        alert(var1);
        document.getElementById('example2').appendChild(var1);
    }

    mytest(<h1>hello</h1>, <h2>world</h2>);

Answer 1

您的JSX 代码在转译为纯 javascript（使用 Babel）时如下所示：

function mytest(var1, var2) {
        alert(var1);
        document.getElementById('example2').appendChild(var1);
}

mytest(React.createElement(
        'h1',
        null,
        'hello'
), React.createElement(
        'h2',
        null,
        'world'
));

所以你可以看到var1实际上是React.createElement函数的产物，它是ReactElement。

Answer 2

试试这个。你会得到你的 react 元素的字符串版本。请记住，它不会作为传统的 js 对象返回，例如 {}。它可能是一个反应元素，所以将它串起来需要做一些事情。我在下面展示的内容应该让您知道 react 对该元素的实际作用。

alert(React.renderToString(var1));