是否可以使用`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？

回答

相關問題