Question

我想使用React路由器，但我遇到了meteor mongo的问题我使用Meteor 1.5.1 main.js：

Meteor.startup(() => {
  Tracker.autorun(() => {
    let translates = Translates.find().fetch();
    ReactDom.render(<App translates={translates}/>, document.getElementById('app'));
  });
});

App.js

import React from 'react';

import AddTranslate from './AddTranslate';
import TranslateList from './TranslateList';

export default class App extends React.Component {

  render() {
    return (
      <div>
        <p>Firts text</p>
        <h1>Hello :D</h1>
        <TranslateList translates={this.props.translates}/>
        <AddTranslate/>
      </div>
    );
  }
};

App.propTypes = {
  translates: React.PropTypes.array.isRequired
};

我知道，我需要这样的事情：

export const history = createBrowserHistory({
  forceRefresh: true
});    

export const routes = (
<Router history={history}>
  <Switch>
    <Route path="/beginner" component={Beginner}/>
      <Route path="/" component={App}/>
  </Switch>
</Router>
);

并改变：

ReactDom.render(<App translates={translates}/>, document.getElementById('app'));

ReactDom.render(<routes/>, document.getElementById('app'));

但翻译的内容= {翻译}？

感谢您的帮助：）

Answer 1

好的，我的新代码有效，我没有在控制台中收到错误但是我遇到了新问题：控制台可以看到新添加的单词，但是web不是我现在有： main.js

const history = createBrowserHistory({
  forceRefresh: true
});

const translates = Translates.find().fetch();

class MyComponent extends React.Component {
    render() {
        return <App translates={translates}/>
    }
}

Meteor.startup(() => {
    ReactDOM.render(
      <Router history={history}>
        <Switch>
          <Route path="/beginner" component={Beginner}/>
          <Route path="/" component={MyComponent}/>
        </Switch>
      </Router>,
      document.getElementById('app'));
});

和App.js

const App = (props) => {
    return (
      <div>
        <p>Hello!</p>
        <a href="/beginner">only start</a>
        <TranslateList translates={props.translates}/>
        <AddTranslate/>
      </div>
    );
};

export default App;

问题就在于此：

export default class TranslateList extends React.Component {
  renderTranslates() {
    return this.props.translates.map((translate) => {
      return <Translate key={translate._id} translate={translate}/>;
    });
  }
  render() {
    return (
      <div>
        {this.renderTranslates()}
      </div>
    );
  }
};

TranslateList.propTypes = {
  translates: React.PropTypes.array.isRequired
};

你怎么看？感谢您的帮助： - ）

反应路由器和meteor mongo

1 个答案: