Question

我知道这不是常见的情况，但有可能有这样的情况

render () {
   return (
      <div>
          blablabalblbla balbal <span ref={ el => this.title = el }></span>'s adsdasd
          <p>would sjdfdfjhdsjfjdf <span ref={ el => this.title = el }></span>?</span></p>
      </div>
   }
}

以后使用componentDidMount()我将其设置为

this.title.innerHTML = obj.title

现在只有最后一个元素会受到影响。是否有任何技术使它适用于这两个元素？

Answer 1

你觉得太复杂了。首先，普遍的共识是尽可能尝试不使用refs。他们并没有真正遵循React的原则和概念，就像设置innerHTML一样。使用React，您应该尝试不直接修改/读取DOM。其次，您所描述的内容可以通过React的state来解决。看一下这个例子：

class Example extends React.Component {
  constructor() {
    super();
    this.state = { title: 'Hello' };
    this.onChange = this.onChange.bind(this);
  }
  onChange(e) { this.setState({ title: e.target.value }); }
  render() {
    return(
      <div>
        blablabalblbla balbal {this.state.title}'s adsdasd
        <p>would sjdfdfjhdsjfjdf {this.state.title}?</p>
        <input onChange={this.onChange} value={this.state.title} />
      </div>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

您可以在JSX中使用state元素，如变量，并使用this.setState()在代码中更改它。然后，React将自动更新DOM中组件的“HTML”。

许多元素使用的单个引用

1 个答案: