Question

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

祖父母是IconsContainer，它将道具向下传递给IconComponent中的每个图标。图标链接到PhotoDisplayComponent。这就是字符串的显示位置。我没有提出任何错误，但字符串没有显示，它正在跳过我的调试器。硬编码到PhotoDisplayComponent中的其他文本会渲染。

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

IconsContainer（父）

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

IconComponent（child）

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不会将其导入并将其作为组件的一部分呈现。在组件中包含组件并使用路由到不同组件的链接是不一样的，链接到组件并不一定意味着它与链接组件有任何关系。

因此，父母和孩子的道具不会传播给孙子，而是传播给孙子＆＃34;独立渲染，没有传递道具。

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

1 个答案: