Question

我是新的反应。

我试图将此实现到我的反应应用中。 https://github.com/trungdq88/react-router-page-transition/blob/master/EXAMPLES.md

现在我不希望它在我的主页上显示，例如在我的＆＃34; MyStories＆＃34;导航到该组件时的组件。但似乎我做错了什么，现在我收到了这个错误。

未捕获错误：MyStories.render（）：必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象。

继承我的代码。

import React from 'react';
import { Router, Route, browserHistory } from 'react-router';
import Layout from './components/Layout';
import Profile from './components/Profile';
import MyStories from './components/MyStories';
import NewStory from './components/NewStory';
import PageTransition from 'react-router-page-transition';
import DetailPage from './components/DetailPage';



class Root extends React.Component {
  constructor(props){
    super(props)
    this.state = {
    }
  }

  render() {
    return(
      <Router history={browserHistory}>
        <Route path='/' component={Layout}>
          <IndexRoute component={Layout} />
          <Route path="/MyStories" component={MyStories}/>
          <Route path="/profile" component={Profile}/>
          <Route path="/NewStory" component={NewStory}/>
          <Route path="/detail/:itemId" component={DetailPage} />
          </Route>


  <Route path="/detail/:itemId" component={DetailPage} />
      </Router>
    )
  }
}

export default Root;


import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router';
import Root from './Root';





let reactAppRender = (element) => {
  ReactDOM.render(
    <Root browserHistory={browserHistory}/>,
    element
  );
};



$(function() {
  let reactApp = document.getElementById('app');
  if (reactApp) {
    reactAppRender(reactApp);
  }
});

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

export default React.createClass({
  render() {
    return
    <div className="transition-item list-page">
        {this.state.items.map(item => (
          <Link
            key={item.id}
            className="list-item"
            to={`/detail/${item.id}`}
          >
            <Item {...item} />
          </Link>
        ))}
      </div>
  }
})

import React from 'react';

import { Link } from 'react-router';
import PageTransition from 'react-router-page-transition';

class Layout extends React.Component {
  constructor(props){
    super(props)
    this.state = {
    }
  }

  render() {
    return(
      <div>
          <h1>Welcome </h1>
          <ul role="nav">
              <li><Link to='/'>HOME</Link></li>
            <li><Link to="/profile">Profile</Link></li>
            <li><Link to="/mystories">MyStories</Link></li>
            <li><Link to="/newstory">NewStory</Link></li>



          </ul>
          <PageTransition>
            {this.props.children}
          </PageTransition>

        </div>
    )
  }
}

export default Layout;

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

export default class DetailPage extends React.Component {
  render() {
    return (
      <div className="transition-item detail-page">
        <Link to="/">Back</Link>
        <h1>
          Detail {this.props.params.itemId}
        </h1>
      </div>
    );
  }
}

Answer 1

Layout上方的组件有render()方法，一行return，但您要返回的内容从下方的行开始：

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

export default React.createClass({
  render() {
    return
    <div className="transition-item list-page">
        {this.state.items.map(item => (
          <Link
            key={item.id}
            className="list-item"
            to={`/detail/${item.id}`}
          >
            <Item {...item} />
          </Link>
        ))}
      </div>
  }
})

发生这种情况时，将JSX组件包装在括号中：

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

export default React.createClass({
  render() {
    return (
      <div className="transition-item list-page">
        {this.state.items.map(item => ( //Incidentally, you reference this.state here but your component has no state
          <Link
            key={item.id}
            className="list-item"
            to={`/detail/${item.id}`}
          >
            <Item {...item} />
          </Link>
        ))}
      </div>
    )
  }
})

你在其他组件中这样做了，你可能刚刚错过了这个。

对于未来：如果你得到Uncaught Error: MyStories.render(): A valid React element (or null) must be returned.行的错误，请查看错误提及的组件的render方法的return语句（在本例中为MyStories）。请记住，目前您只能从React组件的render方法返回JSX。

由于错误，反应列表转换未显示

1 个答案: