未捕获的错误:目标丢失。必须从波普尔经理那里获得波普尔的目标,
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了未捕获的错误:目标丢失。必须从波普尔经理那里获得波普尔的目标,相关的知识,希望对你有一定的参考价值。
我正在尝试使用this answer自定义reactstrap按钮。但我在控制台中收到此错误并且下拉列表无法正常工作
Popper.js:39未捕获错误:目标丢失。 Popper必须从Popper Manager中获得目标,或者作为道具。在Popper._this._getTargetNode(Popper.js:39)的Popper._createPopper(Popper.js:150),位于Object.webpackJsonp的attachRef(ReactRef.js:20)的Popper._this._handlePopperRef(Popper.js:93)位于ReactReconcileTransaction的CallbackQueue.notifyAll(CallbackQueue.js:76)的ReactDOMComponent.attachRefs(ReactReconciler.js:23)中的../node_modules/react-dom/lib/ReactRef.js.ReactRef.attachRefs(ReactRef.js:42)。在ReactReconcileTransaction.clform的ReactReconcileTransaction.closeAll(Transaction.js:206)处关闭(ReactReconcileTransaction.js:80)(Transaction.js:153)
这是我的组件:
import React from 'react'
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'
import FontAwesome from 'react-fontawesome'
import './ComponentStyle.scss'
export default class DropdownIs extends React.Component {
constructor (props) {
super(props)
this.toggle = this.toggle.bind(this)
this.state = {
value: 3,
dropdownOpen: false,
dropdownOptions: []
}
}
toggle () {
console.log('called')
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}))
}
handleChange = (event, index, value) => this.setState({ value });
render () {
return (
<Dropdown className='dropdown-is' isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<span className='dropdown-shown' onClick={this.toggle}
data-toggle='dropdown'
aria-haspopup='true'
aria-expanded={this.state.dropdownOpen}
>
<FontAwesome
className='super-crazy-colors icon'
name='chevron-down'
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
</span>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
)
}
}
更新我使用以下方法修复了上述错误:
<DropdownToggle
tag='span'
className='dropdown-shown'
onClick={this.toggle}
data-toggle='dropdown'
aria-expanded={this.state.dropdownOpen}
>
<FontAwesome
className='super-crazy-colors icon'
name='chevron-down'
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
</DropdownToggle>
而不是跨度,但我甚至不能使它工作,虽然简单的例子是完美的工作,如果保持不变。
出错的原因是我的仓促决定混淆了某些事情:从Dropdown到Custom时我错过了这些部分:
toggle() {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}));
}
至
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
并使用:
<DropdownToggle
tag="span"
onClick={this.toggle}
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen}
>
Custom Dropdown Content
</DropdownToggle>
而不是自定义标签
以上是关于未捕获的错误:目标丢失。必须从波普尔经理那里获得波普尔的目标,的主要内容,如果未能解决你的问题,请参考以下文章
未捕获的错误:AllPostsComments.render():必须返回有效的 ReactComponent
未捕获的错误:_registerComponent(...):目标容器不是 DOM 元素。(...)
Meteor+React 错误:未捕获的不变违规:_registerComponent(...):目标容器不是 DOM 元素