Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/78.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 是否可以将'ref'用于TextNode?_Javascript_Html_Reactjs_Dom_Jsx - Fatal编程技术网

Javascript 是否可以将'ref'用于TextNode?

Javascript 是否可以将'ref'用于TextNode?,javascript,html,reactjs,dom,jsx,Javascript,Html,Reactjs,Dom,Jsx,这: 从“React”导入React; 从“react dom”导入{render}; 让$container; 渲染( ($container=e)}> {“一”}二{“六”} , document.getElementById(“根”) ); console.log($container); 将为我获取元素: import React from "react"; import { render } from "react-dom"; let $container; render(

这:

从“React”导入React;
从“react dom”导入{render};
让$container;
渲染(
($container=e)}>
{“一”}二{“六”}
,
document.getElementById(“根”)
);
console.log($container);
将为我获取
元素:

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);

“一个”
“两个”
“六个”
但是,如果我想引用其中一个TextNode呢?

是否有用于此的公共api?可能是TextNodes的一种特殊的
类型
,这样我就可以将道具传递给
createElement

不,你不能用JSX引用那些字符串文本。此代码转换为:

<b>
  <!-- react-text: 2 -->
  "one"
  <!-- /react-text -->
  <!-- react-text: 3 -->
  "two"
  <!-- /react-text -->
  <!-- react-text: 4 -->
  "six"
  <!-- /react-text -->
</b>
它们不是React元素而是字符串,您可以使用进行检查。解决此问题的一种方法是将这些元素包装在
标记中,这样就可以附加一个ref

render(React.createElement(
  "b",
  { ref: function ref(e) {
      return $container = e;
    } },
  "one",
  "two",
  "six"
), document.getElementById("root"));
$refs={};
渲染(
$refs.one=e}>one
$refs.two=e}>{'two'}
$refs.three=e}>3
,
document.getElementById(“根”)
);

以下是我所做的:我创建了一个只包含文本的组件,并使用
ReactDOM.findDOMNode
在DOM中引用其
TextNode
,如下所示:

$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")
);
在您的示例中,我可以这样做:

class TextNode extends React.Component {

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

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

}

而DOM将有一个
元素,其中包含3个文本节点。

您想实现什么?很难解释,因为我甚至没有使用react。我正在尝试对一个名为nativejsx的库进行类似的操作,并想知道这在react中是否可行。唉,在所有布局中,跨度不会像文本节点一样流动
render(
  <b>
    <TextNode text={"one"} />
    <TextNode text="two" />
    <TextNode text={"six"} />
  </b>,
  document.getElementById("root")
);
<b>onetwosix</b>