Reactjs如何在map函数内部使用ref？
Reactjs如何在map函数内部使用ref？
提问于 2019-01-23 03:11:48
我映射了一个数组，并为每个项目显示一个带有文本的按钮。假设我想在点击按钮时，下面的文本颜色会变成红色。如何定位按钮的同级？我尝试使用ref，但因为它是一个映射的jsx，所以只会声明最后一个ref元素。
下面是我的代码：
class Exams extends React.Component {
constructor(props) {
super()
this.accordionContent = null;
}
state = {
examsNames: null, // fetched from a server
}
accordionToggle = () => {
this.accordionContent.style.color = 'red'
}
render() {
return (
<div className="container">
{this.state.examsNames && this.state.examsNames.map((inst, key) => (
<React.Fragment key={key}>
<button onClick={this.accordionToggle} className="inst-link"></button>
<div ref={accordionContent => this.accordionContent = accordionContent} className="accordionContent">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, neque.</p>
</div>
</React.Fragment>
))}
</div>
)
}
}
export default Exams;正如所解释的，结果是在每次单击按钮时，附加到最后一个按钮的段落将成为目标。
提前感谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-01-23 03:18:25
将this.accordionContent初始化为数组
constructor(props) {
super()
this.accordionContent =[];
}并像这样设置ref
<div ref={accordionContent => this.accordionContent[key] = accordionContent} className="accordionContent">Stack Overflow用户
发布于 2019-01-23 03:36:28
通过使用map的key属性，我找到了一种不使用ref的方法：
accordionToggle = (key) => {
console.log(key)
var a = document.getElementsByClassName('accordionContent')
a[key].style.color = 'red'
}我不确定像这样访问dom，而不是使用refs直接定位元素是否也一样好。
Stack Overflow用户
发布于 2021-11-26 15:26:20
在下面的示例中，我使用了一个refs数组，该数组使用useRef初始化，用于跨重新渲染的持久性，然后在第一次渲染<Wrapper>时填充，从那时起，使用React.createRef()在map中创建的所有re都将被缓存在refs中，并准备好在<Wrapper>重新渲染时使用。
( refs数组的)每个动态ref都被指定为每个子节点的属性：
const Wrapper = ({children}) => {
const refs = React.useRef([]);
// as the refs are assigned with `ref`, set each with a color "red"
React.useEffect(() => {
refs.current.map(ref => {
// no support here for optional chaining: ref?.current?.style.color
if(ref.current) ref.current.style.color = 'red'
})
}, [refs]);
// iterate the children and create a ref inide the "refs" array,
// if one was not already added for this child's index.
// use "cloneElement" to pass that ref to the children
const withProps = React.Children.map(children, (child, i) => {
// no support here for ?? instead of ||
refs.current[i] = refs.current[i] || React.createRef();
return React.cloneElement(child, {ref: refs.current[i] })
});
// no support for <> instead of useless `div` wrapper
return <div>{withProps}</div>
};
ReactDOM.render(<Wrapper>
<button>1</button>
<button>2</button>
<button>3</button>
</Wrapper>, document.body)<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54314945
复制相关文章
相似问题