为什么在标签中添加 space 会将节点注册为 Comment_Node

Question

我有以下与 jest 一起使用的测试代码我在 "Dom".

中加载了 React 组件

const actionDropDownErrorNode =(data,myStyles={})=>{
    let actionDropDownErr = TestUtils.renderIntoDocument(
        <div><ActionDropDownError data={data || <div></div>} styles={myStyles}/></div>
    );

    return ReactDOM.findDOMNode(actionDropDownErr).firstChild;
};

现在当我检查元素的内容时

<span className={styles.solution || "solution"}>{data.solution}</span>

it returns a Text_Node 这是我想要的，但是如果我将元素更改为：

<span className={styles.solution || "solution"}>{data.solution} </span>

它returns一个Comment_Node这是为什么？

出于参考目的，这是我从元素标签中获取 data.solution 的方式：

const elementContent = node =>{
if (node.nodeType === 1 && node.firstChild  !== null) {
    if (node.firstChild.nodeType ===3){
        elements.push(node.firstChild.textContent);
    }

}

};

Answer 1

JSX 中的 space 结果为空字符串 " ":

所以这个 <span className={styles.solution || "solution"}>{data.solution}</span> 将导致：

React.createElement(
  "span",
  { className: styles.solution || "solution" },
  data.solution
);

而这个 <span className={styles.solution || "solution"}>{data.solution} </span> 将导致：

React.createElement(
  "span",
  { className: styles.solution || "solution" },
  data.solution,
  " "
);

为什么在标签中添加 space 会将节点注册为 Comment_Node

Why does adding a space in tag register the node as Comment_Node

dom

reactjs

jestjs

jsdom