TextNodeに `ref`を使用することはできますか？

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> 

をしかし、私はTextNodesの1への参照が何をしたい場合は？
これに公開されているAPIはありますか？たぶん特別なtypeのTextNodesのため、私は小道具をcreateElementに渡すことができますか？

Answer 1

いいえ、JSXでこれらの文字列リテラルを参照することはできません。何このコードはに変換されることである。

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

彼らは、あなたがBabel Replでそれを確認することができ、要素が、文字列に反応していません。この問題を解決する1つの方法は、これらの要素を<span>タグで囲むことです。したがって、refを付けることができます。

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

Answer 2

ここに私がやったことだ：私はもっぱらテキストで構成部品を作成し、そのような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>要素があります。