React Native Timeline ListView

我正在尝试在我的.Net Core React应用程序中实现时间轴 .

这是我的timeline.js代码:

import React from 'react';
import { connect } from 'react-redux';
import Timeline from 'react-native-timeline-listview';

constructor(){
    super()
    this.data = [
      {time: '09:00', title: 'Event 1', description: 'Event 1 Description'},
      {time: '10:45', title: 'Event 2', description: 'Event 2 Description'},
      {time: '12:00', title: 'Event 3', description: 'Event 3 Description'},
      {time: '14:00', title: 'Event 4', description: 'Event 4 Description'},
      {time: '16:30', title: 'Event 5', description: 'Event 5 Description'}
    ]
  }

render(){
    return(
        <Timeline
          data={this.data}
        />
    )
}

export default connect()(Timeline);

这就是我的App.js的样子:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Route } from 'react-router';
import Timeline from './components/Timeline';
...
...
 return (
            <div className="App">
                <header className="App-header">
                    {templates}
                </header>
                <Layout>
                <Route exact path='/' component={Home} />
                <Route path='/timeline' component={Timeline} />
                </Layout>

            </div>

        );
    }
}

export default App;

我得到了意外的令牌,期望在“constructor(){”..如何解决这个问题,我应该创建一个从React Component扩展的时间轴类吗?

在我添加了从React扩展的类之后,我在Index.js中收到错误“Module parse failed:Unexpected token”:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });

// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);

const rootElement = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
            <App />
    </ConnectedRouter>
  </Provider>,
  rootElement);

registerServiceWorker();

回答(1)

2 years ago

constructorrender 方法必须是扩展 React.Component 的类的一部分,以使其成为正确的React组件 .

Example

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.data = [
      { time: "09:00", title: "Event 1", description: "Event 1 Description" },
      { time: "10:45", title: "Event 2", description: "Event 2 Description" },
      { time: "12:00", title: "Event 3", description: "Event 3 Description" },
      { time: "14:00", title: "Event 4", description: "Event 4 Description" },
      { time: "16:30", title: "Event 5", description: "Event 5 Description" }
    ];
  }

  render() {
    return <Timeline data={this.data} />;
  }
}

export default connect()(MyComponent);