React 无法识别 DOM 元素上的 `toggleNode` 属性

Posted 2023-02-22

【中文标题】React 无法识别 DOM 元素上的 `toggleNode` 属性

【英文标题】：React does not recognize the `toggleNode` prop on a DOM element

【发布时间】：2019-10-18 03:58:41

【问题描述】：

我收到以下警告，我认为这些警告会阻止我的应用加载其全部功能。

警告：React 无法识别 DOM 元素上的 toggleNode 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 togglenode。如果您不小心从父组件中传递了它，请将其从 DOM 元素中移除。

警告：收到false 的非布尔属性focused。 如果要将其写入 DOM，请改为传递一个字符串：focused="false" 或focused=value.toString()。 如果您过去使用focused=condition && value 有条件地省略它，请传递focused=condition ? value : undefined 代替。

控制台输出

Warning: React does not recognize the `toggleNode` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `togglenode` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by ForwardRef)
    in ForwardRef (created by ListGroupItem)
    in ListGroupItem (created by Bootstrap(ListGroupItem))
    in Bootstrap(ListGroupItem) (at MyTreeMenu.js:22)
    in ListItem (at MyTreeMenu.js:53)
    in div (created by AbstractNav)
    in AbstractNav (created by Context.Consumer)
    in ContextTransform(AbstractNav) (created by ListGroup)
    in ListGroup (created by Bootstrap(ListGroup))
    in Bootstrap(ListGroup) (created by Uncontrolled(Bootstrap(ListGroup)))
    in Uncontrolled(Bootstrap(ListGroup)) (created by ForwardRef)
    in ForwardRef (at MyTreeMenu.js:51)
    in div (created by c)
    in c (created by t)
    in t (at MyTreeMenu.js:41)
    in MyTreeMenu (at MyCanvas.js:270)
    in div (at MyCanvas.js:269)
    in div (created by Col)
    in Col (at MyCanvas.js:268)
    in div (created by Row)
    in Row (created by Bootstrap(Row))
    in Bootstrap(Row) (at MyCanvas.js:267)
    in MediaQuery (at MyCanvas.js:266)
    in div (created by Container)
    in Container (at MyCanvas.js:264)
    in div (at MyCanvas.js:262)
    in MyCanvas (created by Context.Consumer)
    in Route (at App.js:10)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:9)
    in App (at src/index.js:15)

Warning: Received `false` for a non-boolean attribute `focused`.

If you want to write it to the DOM, pass a string instead: focused="false" or focused=value.toString().

If you used to conditionally omit it with focused=condition && value, pass focused=condition ? value : undefined instead.
    in div (created by ForwardRef)
    in ForwardRef (created by ListGroupItem)
    in ListGroupItem (created by Bootstrap(ListGroupItem))
    in Bootstrap(ListGroupItem) (at MyTreeMenu.js:22)
    in ListItem (at MyTreeMenu.js:53)
    in div (created by AbstractNav)
    in AbstractNav (created by Context.Consumer)
    in ContextTransform(AbstractNav) (created by ListGroup)
    in ListGroup (created by Bootstrap(ListGroup))
    in Bootstrap(ListGroup) (created by Uncontrolled(Bootstrap(ListGroup)))
    in Uncontrolled(Bootstrap(ListGroup)) (created by ForwardRef)
    in ForwardRef (at MyTreeMenu.js:51)
    in div (created by c)
    in c (created by t)
    in t (at MyTreeMenu.js:41)
    in MyTreeMenu (at MyCanvas.js:270)
    in div (at MyCanvas.js:269)
    in div (created by Col)
    in Col (at MyCanvas.js:268)
    in div (created by Row)
    in Row (created by Bootstrap(Row))
    in Bootstrap(Row) (at MyCanvas.js:267)
    in MediaQuery (at MyCanvas.js:266)
    in div (created by Container)
    in Container (at MyCanvas.js:264)
    in div (at MyCanvas.js:262)
    in MyCanvas (created by Context.Consumer)
    in Route (at App.js:10)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:9)
    in App (at src/index.js:15)

App.js

import React from 'react'
import './App.css'
import MyCanvas from './components/MyCanvas'
import  BrowserRouter, Route  from 'react-router-dom'

class App extends React.Component 

  render () 
    return <BrowserRouter>
      <Route exact path="/en/design/configurator" component=MyCanvas/>
      <Route path="/en/design/configurator/fabric/:id" component=MyCanvas/>
    </BrowserRouter>
  


export default App

MyCanvas.js

 <Col xs=3>
     <div style= height: '768px', display: 'block', overflowY: 'scroll' >
          <MyTreeMenu data=this.state.menu processSelection=this.processSelection.bind(this)/>
     </div>
</Col>

MyTreeMenu.js

import React from 'react'
import TreeMenu from 'react-simple-tree-menu'
import Form from 'react-bootstrap/Form'
import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

const DEFAULT_PADDING = 16
const ICON_SIZE = 8
const LEVEL_SPACE = 16

const ToggleIcon = ( on ) => <span style= marginRight: 8 >on ? '-' : '+'</span>

const ListItem = (
                    level = 0,
                    hasNodes,
                    isOpen,
                    label,
                    searchTerm,
                    openNodes,
                    ...props
                  ) => (
  <ListGroupItem
    ...props
    style= paddingLeft: DEFAULT_PADDING + ICON_SIZE + level * LEVEL_SPACE, cursor: 'pointer', >
    hasNodes && <ToggleIcon on=isOpen/>
    <img src=props.url width=32 height=32 alt=label/>
    &nbsp;
    label
  </ListGroupItem>
)

class MyTreeMenu extends React.Component 

  constructor (props)
    super(props)
    this.processSelection = this.props.processSelection.bind(this)
  

  render () 
    return (
      <TreeMenu data=this.props.data
                debounceTime=125
                onClickItem=( key, label, ...props ) => this.processSelection(props.modifier, props.slug)>
        ( search, items ) => (
          <>
            <Form>
              <Form.Group controlId="formSearch">
                <Form.Control onChange=e => search(e.target.value) placeholder="Type and search"/>
              </Form.Group>
            </Form>
            <ListGroup>
              
                items.map(props => (<ListItem ...props />))
              
            </ListGroup>
          </>
        )
      </TreeMenu>
    )
  


export default MyTreeMenu

【问题讨论】：

可能...props 遍布各地

我使用第三方库作为参考github.com/iannbing/react-simple-tree-menu/blob/master/stories/…。谢谢你的提示

检查传递给ListGroupItem的props

@Easwar 是的，它解决了其中一个警告。谢谢！

在您发布的示例中，您可以看到toggleNode was filtered out from props

【参考方案1】：

我的猜测是您的ToggleIcon 缺少应该使用toggleNode 处理程序的onClick 处理程序（您没有从props 的ListItem 中过滤掉它）。

    const ListItem = (
      level = 0,
      hasNodes,
      isOpen,
      label,
      searchTerm,
      openNodes,
      toggleNode, // should be destruct here in favor of ToggleIcon
      onClick,
      matchSearch,
      ...props
    ) => (
// .....

    hasNodes && <ToggleIcon on=isOpen onClick=toggleNode />