javascript - React does not recognize the `toggleNode` prop on a DOM element - Stack Overflow

admin管理员组

文章数量:1405170

I am getting the following warnings which I assume prevent my app from loading its full functionality.

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 ponent, remove it from the DOM element.

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.

Console Output

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 ponent, 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 './ponents/MyCanvas'
import { BrowserRouter, Route } from 'react-router-dom'

class App extends React.Component {

  render () {
    return <BrowserRouter>
      <Route exact path="/en/design/configurator" ponent={MyCanvas}/>
      <Route path="/en/design/configurator/fabric/:id" ponent={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

I am getting the following warnings which I assume prevent my app from loading its full functionality.

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 ponent, remove it from the DOM element.

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.

Console Output

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 ponent, 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 './ponents/MyCanvas'
import { BrowserRouter, Route } from 'react-router-dom'

class App extends React.Component {

  render () {
    return <BrowserRouter>
      <Route exact path="/en/design/configurator" ponent={MyCanvas}/>
      <Route path="/en/design/configurator/fabric/:id" ponent={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

• javascript
• reactjs

Share Improve this question Follow asked Jun 2, 2019 at 7:36 user3137329user3137329 5

• 2 probably the ...props spreading all over – Sagiv b.g Commented Jun 2, 2019 at 7:41
• im using a third party library with this as a reference github./iannbing/react-simple-tree-menu/blob/master/stories/…. Thank you for the hint – user3137329 Commented Jun 2, 2019 at 7:43
• 1 Check the props passed to ListGroupItem – Easwar Commented Jun 2, 2019 at 7:43
• @Easwar yes that solved one of the warnings. Thank you! – user3137329 Commented Jun 2, 2019 at 7:45
• 1 In the example you posted, you can see that toggleNode was filtered out from props – Sagiv b.g Commented Jun 2, 2019 at 7:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

My guess is that your ToggleIcon is missing the onClick handler which should use the toggleNode handler (which you didn't filter out from props of 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} />}

本文标签： javascriptReact does not recognize the toggleNode prop on a DOM elementStack Overflow