如何從ReactElement獲取textContent？

給定ReactElement這樣的：如何從ReactElement獲取textContent？

var myReactElement = (
    <span><strong>Chel</strong>tenham VIC 3192</span> 
);

我怎麼能得到它的文本內容（"Cheltenham VIC 3192"在這種情況下）？

上下文：

設想一個自動提示組件。用戶可以指定如何呈現建議。例如，用戶可以提供以下功能的部件：

function(suggestion) { 
    return (
    <span><strong>{suggestion[0]}</strong>{suggestion.slice(1)}</span> 
); 
}

當選擇建議，我需要設置輸入字段到建議的文本內容的值，所以如果「中號安通「被呈現在建議列表中，輸入字段的值應該是」Mentone「。

來源

2015-03-31 Misha Moroshko

我不知道你想做什麼？有一個'componentDidMount'方法實現了DOM，你可以使用'innerText'。但是，因爲這只是創建的JSX語法，您爲什麼不直接在'render'中提取呢？ – WiredPrairie 2015-03-31 11:54:31

@WiredPrairie我在問題中添加了上下文來澄清事情。 – 2015-03-31 12:24:25

-2

您可以將文本作爲道具傳遞給組件並在JSX中渲染道具。這是正確的方法。

來源

2015-03-31 12:26:40 Roman

雖然我沒有一個工作的例子，但下面的東西應該可以工作。在這種情況下，我添加了代碼來連接onClick以包裝每個項目的div元素。並且使用bind包含了已呈現的建議，以便在執行onSuggestionClick事件回調時提供完整文本（以及您在每個suggestion中可能具有的任何其他詳細信息）。

這裏假設suggestions在這種情況下是在一個數組中。如果需要，您也可以使用索引。您可能會發現，您需要爲每個項目添加一個key屬性到最外層的div，以便React正確跟蹤對建議列表的更改（以便虛擬DOM可以正確地「擴散」）。

function suggestionFunction(suggestion) { 
    return (
    <span><strong>{suggestion[0]}</strong>{suggestion.slice(1)}</span> 
); 
} 


var MyComponent = React.createClass({ 
    onSuggestionClick:function(suggestion) { 
     this.setState({ 
      current: suggestion 
     }); 
    }, 

    render: function() { 
     var _this = this; 
     var suggestions = this.props.suggestions || []; 
     return (<div> 
      <div> 
       <input value={ this.state.current } /> 
      </div> 
      { suggestions.map(function(suggestion) { 
       return (<div onClick=_this.onSuggestionClick(_this, suggestion)> 
        { suggestionFunction(suggestion) } 
       </div>); 
      })} 
     </div>); 
    } 
});

來源

2015-03-31 12:46:39 WiredPrairie

你只是想在索引發生變化時傳遞索引。這允許父母更新其狀態，然後一切都更新。

將數據從dom中提取出來在其他庫中是有意義的，但React使我們很少這樣做。明智地選擇你的真理之源:-)

var C = React.createClass({ 
    handleSelect(index){ 
    this.props.onSelect(index); 
    }, 
    render(){ 
    var options = this.props.options 
     // map, but keep track of the index 
     .map((x, i) => [x, i]) 
     // some filtering thing 
     // this also allows efficient inserts and removals by giving a good key 
     .filter(([x, i]) => x[0] === 'b'); 
    return (
     <div> 
     <input value={this.props.value} onChange={this.handleChange} /> 
     <ul role="listbox"> 
      {options.map(([x, i]) => 
      <li key={i} onClick={e => this.handleSelect(i)}> 
       {this.props.renderItem(x, i)} 
      </li> 
     )} 
     </ul> 
     </div> 
    ); 
    } 
}); 

var ITEMS = ["foo", "bar", "baz", "quux", "bananas"]; 
var App = React.createClass({ 
    getInitialState(){ 
    return {selected: "baz"}; 
    }, 
    handleSelect(index){ 
    // setState based on the index 
    // note that even though bananas is only the 3rd item rendered 
    // in the dom, index here will be 4 so this works 
    this.setState({selected: this.props.items[index]}); 
    }, 
    render(){ 
    var renderItem = x => { 
     var cn = x === this.state.selected ? 'active' : null; 
     return <strong className={cn}>{x}</strong> 
    }; 
    return <div> 
     Hello, world! 
     <C options={this.props.items} 
     renderItem={renderItem} 
     onSelect={this.handleSelect} value={this.state.selected} /> 
    </div>; 
    } 
});

jsbin

來源

2015-04-01 09:40:17 FakeRainBrigand

如何從ReactElement獲取textContent？

回答

相關問題