React：有没有类似于 node.textContent 的东西？

Question

我正在尝试测试一个反应组件的孩子，我想获得其孩子的文本表示。

有没有类似node.textContentReact的工具？

我想要这样的东西：

let testComponent = (
  <Test>
    <p>abc</p>
    <p>abc2</p>
  </Test>
);

expect(testComponent.props.children.toString()).to.equal('abc abc2');

Answer 1

const getNodeText = node => {
  if (['string', 'number'].includes(typeof node)) return node
  if (node instanceof Array) return node.map(getNodeText).join('')
  if (typeof node === 'object' && node) return getNodeText(node.props.children)
}

https://codesandbox.io/s/react-getnodetext-h21ss

  // in the picture
  {heading} // <Heading>Hello <span className="red">Code</span>Sandbox</Heading>
  <pre ref={printInnerHTML}/>
  <pre>{getNodeText(heading)}</pre>

Answer 2

您可以使用getDomNode()或findDomNode()，然后使用普通的 DOM 方法。

如果你正在寻找 React 方式 - 不应该有这样的方式，因为父母对其孩子非常盲目。