使用`ref`来引用TextNode是否可行？

Question

This:

import React from "react";
import { render } from "react-dom";

let $container;

render(
  <b ref={e => ($container = e)}>
    {"one"}two{"six"}
  </b>,
  document.getElementById("root")
);

console.log($container);

将会获取到 <b> 元素：

<b>
  <!-- react-text: 2 -->
  "one"
  <!-- /react-text -->
  <!-- react-text: 3 -->
  "two"
  <!-- /react-text -->
  <!-- react-text: 4 -->
  "six"
  <!-- /react-text -->
</b>

但是，如果我想要一个TextNode的引用呢？
有没有公开的API可以实现这一点？也许有一个专门针对TextNodes的type，这样我就可以向createElement传递props了吗？

- pomber

---

你想要实现什么目标？ - lukaleli

很难解释，因为我甚至没有使用React。我正在尝试使用一个叫做nativejsx的库来实现类似的功能，并想知道是否可以在React中实现这个功能。 - pomber

Answer 1

这是我所做的：我创建了一个仅包含文本的组件，并使用ReactDOM.findDOMNode在DOM中引用了它的TextNode，如下所示：

class TextNode extends React.Component {

  componentDidMount() {
      this.textNode = ReactDOM.findDOMNode(this); // Will be the DOM text node
  }

  render() {
    return this.props.text;
  }

}

在你的例子中，我可以这样做：

render(
  <b>
    <TextNode text={"one"} />
    <TextNode text="two" />
    <TextNode text={"six"} />
  </b>,
  document.getElementById("root")
);

生成的 HTML 不会包含任何 span 元素：

<b>onetwosix</b>

当DOM中有一个包含3个文本节点的<b>元素时。

- Lukas

Answer 2

不，你不能在JSX中使用对那些字符串字面量的引用。这段代码被转换成了：

render(React.createElement(
  "b",
  { ref: function ref(e) {
      return $container = e;
    } },
  "one",
  "two",
  "six"
), document.getElementById("root"));

它们不是React元素，而是字符串，您可以使用Babel Repl进行检查。解决此问题的一种方法是将这些元素包装在<span>标记中，这样您就可以附加引用。

$refs = {};

render(
  <b>
    <span ref={e => $refs.one = e}>one</span>
    <span ref={e => $refs.two = e}>{'two'}</span>
    <span ref={e => $refs.three = e}>three</span>
  </b>,
  document.getElementById("root")
);

- Ignacio

---

哎呀，跨度在所有布局中不会像文本节点一样流动。 - jedierikb