在 react-router 3 中使用 <Link> 传递道具时遇到问题

Question

我觉得我遗漏了一些非常明显的东西，但我的 React 组件存在一些问题。我正在设置它，以便祖父母将道具传递给孙子（在我的测试示例中，它只是一个字符串），以便它将显示在孙子而不是孩子中。

祖父级是 IconsContainer，它将 props 向下传递给 IconComponent 中的每个图标。图标链接到 PhotoDisplayComponent。那就是显示字符串的地方。我没有提出任何错误，但没有显示字符串，它正在跳过我的调试器。硬编码到 PhotoDisplayComponent 中的其他文本会呈现。

我知道标签似乎没有链接到任何内容。我正在使用通过类生成的 flaticon 图标，因此它显示在显示这些图标的页面上，并附有链接。如果对视觉效果有帮助，这是一项正在进行的工作：https://fotou.herokuapp.com/

图标容器（父）

import React from "react";
import IconComponent from "../components/IconComponent"
import { Link } from 'react-router';

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

  render(){
    return(
      <div className="icon-list">
        <IconComponent
          class="flaticon-black icon cat"
          test="test"
        />
        <IconComponent
          class="flaticon-animals icon dog"
        />
        <IconComponent
          class="flaticon-dove icon bird"
        />
        <IconComponent
        />
        <IconComponent
          class="flaticon-drink icon food"
        />
        <IconComponent
          class="flaticon-mountain icon scenery"
        />
        <IconComponent
          class="flaticon-city icon buliding"
        />
      </div>
    )
  }
}

export default IconsContainer

图标组件（子）

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

class IconComponent extends React.Component {
  constructor(props) {
   super(props);
    this.state = {
     test: this.props.test
    }
  }

  render() {
    let test = this.state.test

    return(
      <Link to="/photo_display" className={this.props.class}></Link>
    )
  }
}

export default IconComponent;

PhotoDisplayComponent（孙子）

import React from "react"
import IconComponent from "../components/IconComponent"

class PhotoDisplayComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      test: this.props.test
    }
  }

  render() {
    let test = this.state.test
    return(
      <div>
         <h1>Photo</h1>
         <p>{test}</p>
      </div>
    )
  }
}

export default PhotoDisplayComponent

Answer 1

PhotoDisplayComponent 并不是真正的孙子组件，因为 IconComponent 不会导入它并将其渲染为组件的一部分。 在组件中包含组件和使用路由到不同组件的链接不是一回事，链接到组件并不一定意味着它与链接组件有任何关系。

因此，parent 和 child 的 props 不会传播给孙子，而是“孙子”独立渲染，没有传递的 props。