是否可以使用`ref`作为TextNode？

此：是否可以使用`ref`作为TextNode？

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>

但是，如果我想要什么的TextNodes的一个参考？
有没有公开的API？也许特殊的type为TextNodes，所以我可以通过道具createElement？

来源

2017-08-12 pomber

你想达到什么目的？ – lukaleli

很难解释，因为我甚至没有使用反应。我试图用一个名为nativejsx的库做类似的事情，并想知道这是否可能与反应。 – pomber

不，你不能在JSX中引用这些字符串文字。这段代码转换为是：

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

他们没有反应的元素，但字符串，您可以用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") 
);

来源

2017-08-13 05:54:07 Ignacio

这里就是我所做的：我创建了一个完全由一个文本的一个组成部分，并在DOM与ReactDOM.findDOMNode引用其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 S：

<b>onetwosix</b>

而DOM将有一个<b>元素，里面有3个文本节点。

来源

2018-01-21 15:03:53 Lukas

是否可以使用`ref`作为TextNode？

回答

相关问题