Question

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

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

这里ReactDOM.render加入＆＃39;＆lt; h1＆gt;你好，世界！＆LT; / H1＆GT;＆＃39;作为第一个参数。

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

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

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

Answer 1

当您转换为普通javascript（使用Babel）时，您的JSX代码如下所示：

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

试一试。您将获得反应元素的弦乐版本。请记住，它不会像传统的js对象那样回归，比如{}。它可能是一个反应元素，所以对它进行字符串处理需要做一些事情。我在下面展示的内容应该为您提供实际对该元素做出的反应。

alert(React.renderToString(var1));

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

2 个答案: