javascript - 是否可以将 `ref` 用于 TextNode？

Question

这个:

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，该怎么办？
有公共(public)API吗？也许是一个特别的type对于 TextNodes，这样我可以将 props 传递给 createElement ？

Answer 1

不，您无法使用 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")
);