Question

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

警告： React无法识别DOM元素上的var dnaRules = {} /// register DNA register = function(key) { var item = {}; if (dnaRules[key]) return dnaRules[key]; else { item[key]= []; item.equal = function(value){ item["data"] = value; } dnaRules[key]= item; } return item; } register("GGC").equal(['GC', 'GC', 'CG']); register("gat").equal(["GC", "AT", "TA"]); register("PGYYYHVB").equal(["GC", "GC", "GC"]); // Search DNA search = function(value){ var key = null; Object.keys(dnaRules).forEach(function(v){ if (v.toLowerCase().indexOf(value.toLowerCase())>=0) key = v; }); return key== null ? null : dnaRules[key] } var item = search("ggc"); // if the item dose not exist you get null // now display the items console.log(item.data) /// or you could change them even // item.equal([])道具。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写toggleNode。如果您不小心从父组件传递了它，请将其从DOM元素中删除。

警告：收到togglenode的非布尔属性false。如果要将其写入DOM，请改为传递一个字符串：focused =“ false”或focused = {value.toString（）}。如果您以前使用focused = {condition && value}有条件地忽略它，请传递focused = {condition？值：未定义}。

控制台输出

focused

App.js

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)

MyCanvas.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

MyTreeMenu.js

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

Answer 1

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

ListItem

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

1 个答案: