Question

给出ReactElement这样的：

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

当选择建议时，我需要将输入字段的值设置为建议的文本内容，因此如果在建议列表中呈现“ M entone”，则该值为输入字段应为“Mentone”。

Answer 1

虽然我没有一个有效的例子，但下面的内容应该有效。在这种情况下，我添加了代码来连接onClick包含每个项目的div元素。并使用bind包含已呈现的建议，以便在执行onSuggestionClick事件回调时，它具有可用的完整文本（以及每个{{1}中可能包含的任何其他详细信息}）。

这假设在这种情况下suggestion在数组中。如果需要，您也可以使用索引。您可能会发现需要为每个项目的最外层suggestions添加key属性，以便React正确跟踪对建议列表的更改（以便虚拟DOM可以正确地“扩散”））。

div

Answer 2

您只想在某些内容发生变化时传递索引。这允许父母更新其状态，然后更新所有内容。

从其他库中提取数据是有意义的，但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

Answer 3

您可以将文本作为道具传递给组件并在JSX中渲染道具。这是正确的方法。

如何从ReactElement获取textContent？

3 个答案: