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

Question

首先：我知道有关此错误的问题已经很多，但它们有不同的来源（我认为）。这是我的代码：

<BrowserRouter>
    <React.Fragment>
        <Navbar className='navbar_all'>
            <Navbar.Header>
                <Navbar.Brand>
                    <Link className='navbar_brand' id='home' to='/'>
                        <img alt='ZdajTo' src="assets/images/new_logo.png" style={{height: '30px'}}/>
                    </Link>
                </Navbar.Brand>
            </Navbar.Header>
            <Nav className='float_right'>
                <Link to='/homepage' style={{textDecoration: 'none'}}> 
                {/*^^^^^^^^^^^^ This line throws an error*/}

                    <button style={{
                        backgroundColor: '#F16049',
                        border: '4px solid #F16049',
                        borderRadius: '4px',
                        padding: '10px',
                        marginBottom: '5px',
                        color: '#fff'
                    }}>
                        DLA ROZWIĄZUJĄCYCH
                    </button>
                </Link>
            </Nav>
        </Navbar>
    </React.Fragment>
</BrowserRouter>

我得到的错误是：

  

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

问题是，我相信嵌套，但是我不知道这里有什么错。

有什么想法吗？

Answer 1

问题在于，您不应将DOM元素直接嵌套在Nav组件下，而应使用NavItem。这种方法的问题在于NavItem是anchor，并且在Link下嵌套Link会引发另一个错误，因为LinkContainer也是锚点。

解决方案是像这样使用react-router-bootstrap中的import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Nav, NavItem, Navbar } from 'react-bootstrap'; import { LinkContainer } from 'react-router-bootstrap'; const app = ( <BrowserRouter> <Navbar> <Nav> <LinkContainer to="/somewhere"> <NavItem>somewhere</NavItem> </LinkContainer> </Nav> </Navbar> </BrowserRouter> ); ReactDOM.render(app, document.getElementById('root'));。

var schema = {
    "title": "BeautifulDataRequest",
    "type": "object",
    "properties": {
        "DateOfRequest": {
            "type": "string"
        },
        "PeopleRequested": {
            "type": "string"
        },
        "JourneyType": {
            "type": "string"
        },
        "AccommodationDate": {
            "type": "string"
        },
        "Request": {
            "type": "string"
        }
    }
};

var sampleData = [{
    "Id": "9be37e98-bc35-4aa5-8c74-39ea76415db5",
    "UserId": "c7c76272-e6f3-e811-93fc-005056b22eda",
    "TempId": null,
    "UserTypeName": null,
    "StoreCode": "fdsdf",
    "CurrentStepCode": "Done",
    "StoreAssignedName": "",
    "CreateDate": "2018-11-30T10:05:25.867",
    "isDeleted": false,
    "AdditionalData": {},
    "Type": {
        "Id": "c7c76272-e6f3-e811-93fc-005056b22eda",
        "Name": "Request"
    },
    "DateOfRequest": "17.11.2018",
    "PeopleRequested": "2",
    "JourneyType": "Doppelzimmer",
    "Request": "Nachfrage zur Reise",
    "AccommodationDate": "Insel Rügen – Perle der Ostsee"
}, {
    "Id": "1",
    "UserId": "2",
    "TempId": null,
    "UserTypeName": null,
    "StoreCode": "fdsdf",
    "CurrentStepCode": "Done",
    "StoreAssignedName": "",
    "CreateDate": "2018-11-30T10:05:25.867",
    "isDeleted": false,
    "AdditionalData": {},
    "Type": {
        "Id": "c7c76272-e6f3-e811-93fc-005056b22eda",
        "Name": "Request"
    },
    "DateOfRequest": "test",
    "PeopleRequested": "test",
    "JourneyType": "test",
    "Request": "test",
    "AccommodationDate": "test"
}];

function matchSchema (samples, schema) {
  var dataset = [];
  samples.forEach( sample => {
    // Deep clone schema (may use lodash or underscore)
    var clone = jQuery.extend(true, {}, schema);
    _.findKey(schema.properties, (value, key) => {
      if (_.has(sample, key)) {
        // You may validate type here
        clone.properties[key] = sample[key];
      }
    });
    // Add clone to dataset
    dataset.push(clone);
  });
  return dataset;
}

var result = matchSchema(sampleData, schema);
var $table = $('#result-table tbody');
console.log(result);

// Draw table
result.forEach(item => {
  var row = $('<tr/>');
  _.each(item.properties, (value, key) => {
    var column = $('<td/>').text(value);
    row.append(column);
  });
  $table.append(row);
});