Question

我正在尝试在.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中出现错误“模块解析失败：意外的令牌”：

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();

Answer 1

您的constructor和render方法必须是扩展React.Component的类的一部分，才能使其成为适当的React组件。

示例

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);

反应本机时间轴ListView

1 个答案: