Question

我在浏览器控制台中收到了一些错误

Warning: Element: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. 

Warning: Element: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. 

Uncaught Invariant Violation: Invalid tag: {StrainGrid}

奇怪的是，webpack并没有吐出任何错误。

这是我的App.js文件：

import React from 'react';
import { render } from 'react-dom';

import sass from './styles/style.scss';

import Main from './components/Main';
import Single from './components/Single';
import StrainGrid from './components/StrainGrid';

import { Router, Route, IndexRoute, browserHistory } from 'react-router';

const router = (
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={StrainGrid}></IndexRoute>
      <Route path="/view/:postId" component={Single}></Route>
    </Route>
  </Router>
)

render(router, document.getElementById('root'));

这是Main.js：

import React from 'react';
import { Link } from 'react-router';

const Main = React.createClass({
  render() {
    return (
      <div>
        <h1><Link to="/">Strain Guide</Link></h1>
        {React.cloneElement(this.props.children, this.props)}
      </div>
    )
  }
});


export default Main;

StrainGrid组件：

import React from 'react';

const StrainGrid = React.createClass({
  render() {
    return (
       <div className="straing-grid">
          Grid
        </div>
    )
  }
});

export default StrainGrid;

任何帮助都会很棒。不知道为什么我会得到这些。

Answer 1

更改此：{React.cloneElement（this.props.children，this.props）} =＆gt;

{React.cloneElement（this.props.children， {... this.props} ）}

React Uncaught Invariant Violation：无效标记：

1 个答案: