通过一个 ref 访问多个元素 React
Access to a several elements through one ref React
我想使用 refs
功能访问多个元素。然后在我可以遍历 this.tabs
的元素之后。下面的代码不起作用,如何修复它才能正常工作?我现在使用的解决方案是document.querySelectorAll('tabs')
,但它似乎不适合React。
class Comp extends React.Component {
constructor(props) {
super(props);
this.tabs = React.createRef();
}
componentDidMount() {
console.log(this.tabs);
}
render() {
return (
<div>
<span class="tab" ref={this.tabs}>One</span>
<span class="tab" ref={this.tabs}>Two</span>
<span class="tab" ref={this.tabs}>Three</span>
</div>
);
}
}
ReactDOM.render(
<Comp />,
document.getElementById('app')
);
<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="app"></div>
您分配 refs
的方式不正确。在 render()
方法的早期开始做:
this.tabs = []
refs 将通过
分配
<span className="tab" ref={(tab) => { this.tabs.push(tab) }}>One</span>
这个案例希望你能打this.tabs
!
我想使用 refs
功能访问多个元素。然后在我可以遍历 this.tabs
的元素之后。下面的代码不起作用,如何修复它才能正常工作?我现在使用的解决方案是document.querySelectorAll('tabs')
,但它似乎不适合React。
class Comp extends React.Component {
constructor(props) {
super(props);
this.tabs = React.createRef();
}
componentDidMount() {
console.log(this.tabs);
}
render() {
return (
<div>
<span class="tab" ref={this.tabs}>One</span>
<span class="tab" ref={this.tabs}>Two</span>
<span class="tab" ref={this.tabs}>Three</span>
</div>
);
}
}
ReactDOM.render(
<Comp />,
document.getElementById('app')
);
<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="app"></div>
您分配 refs
的方式不正确。在 render()
方法的早期开始做:
this.tabs = []
refs 将通过
分配<span className="tab" ref={(tab) => { this.tabs.push(tab) }}>One</span>
这个案例希望你能打this.tabs
!