Question

这很难解释，但我说我的导航栏顶部包含所有主要链接。我单击导航栏顶部的模型链接，然后在下面呈现模型页面。模型页面包含不同模型的缩略图。我怎样才能获得它以便点击该模型的缩略图让我加载该人的组件来代替模型页面？

这是我到目前为止所拥有的。顺便说一句，我使用的是React-router 3.0.5

App.jsx：

import React from 'react';
import LeftPane from './LeftPane.jsx';
import RightPane from './RightPane.jsx';
import CenterPane from './CenterPane.jsx';
import TopPane from './TopPane.jsx';
import Models from './Models.jsx';
import Projects from './Projects.jsx';
import Contact from './Contact.jsx';
import Router from 'react-router';
import axios from 'axios';

class App extends React.Component {
  constructor() {
    super();
    this.state = { modelBucket: [] };
  }

  componentWillMount() {
    axios({
      method: 'POST',
      url: '/modelcall'
    })
    .then((response) => {
      console.log('this is the axios call from models.jsx (the response) :', response);
      this.setState({modelBucket: response});
    })
    .catch((error) => {
      console.log('this is an error from the axios call in models.jsx', error);
    });
  }

  render() {
    return (
      <div>
        <div className="container-fluid">
          <div>
            <TopPane />
          </div>

          <div className="container-fluid">    
            <div className="row content imageThumbMargin">
              <div> 
                {React.Children.map(this.props.children, child => React.cloneElement(child,
                  { 
                    modelNames: this.state.modelBucket.data,
                    path: this.props.route.path
                  })
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Model.jsx :(模板卡是各个缩略图）

import React from 'react';
import ModelCard from './ModelCard.jsx';
import axios from 'axios';

class Models extends React.Component {
  constructor() {
    super();
    this.state = { modelList: [] };
  }

  render() {
    return (
      <div>
        <p className = "text-center">Models Page</p>
        {this.props.modelNames.map((model, i) => {
          return (
            <div key={i} className = "imageThumbs col-md-2">
              <ModelCard key={i} model={model} />
            </div>
          );
        })}
      </div>
    );
  }
}

export default Models;

和ModelCard.jsx：

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

class ModelCard extends React.Component {
  constructor(props) {
    super(props);
  }


  render () {
    return (
      <div>
        <Link to={'/' + this.props.model.name}><div>
          <img src={this.props.model.imageUrl} />
          <p className="text-center imageMarginRight">{this.props.model.name}</p>
        </div></Link>
      </div>
    );
  }
}

export default ModelCard = ModelCard;

Answer 1

让导航栏保持最佳状态的一种方法。其他组件的一部分是渲染基本路由，然后将其他路由嵌套在其中：

<Route path='/'>
  <Route path='/modelcards' component={ModelCards} />
  <Route path='/modelcards/:id' component={Model} />
<Route>

然后，您可以调用browserHistory.push('/modelcards/${id}')，并在this.props.params.id下提供参数id，您可以在render函数中呈现相应的卡片。如果你想传递很多参数并且不想为它创建路线，你可以在推送电话中传递参数：browserHistory.push({ pathname:'/modelcards', params: { id: ..., title:... })

React路由器如何在现有组件内呈现新组件

1 个答案: