Question

所以我正在构建一个简单的React应用程序。这是我第一次使用它。所以我建立了这个组件：

import React, { Component } from "react";
import { Link } from "react-router-dom";

class FeatureBlock extends Component {
constructor(props) {
    super(props);
}
render() {
   //code here  
   return (
   <li className="work-list-item" id={this.props.id}>
        <Link to={this.props.src}>
            <div className="thumbnail-wrapper">
                <img width={this.props.width} height={this.props.height} src={this.props.src} alt={this.props.alt} />
            </div>
            <div className="work-info">
                <div className="work-content">
                    <h2>{this.props.title}</h2>
                    <div className="excerpt">{this.props.contentClass}</div>
                </div>
            </div>
        </Link>
    </li>
    );
}
}
export default FeatureBlock;

我将其导入到我的index.js文件中，如下所示：

import React, { Component } from "react";
import test from "./test";
import { Link } from "react-router-dom";
import FeatureBlock from "../FeatureBlocks/FeatureBlock";

class testing extends Component {
render() {
    return (
  <div>
    <div className="component-container jobs-listing-component contact-page-component full-width-bg">
        <test id="test-id" title="Test Title" titleDesc="" contentClass="">
          <div className="work-archive-component">
            <ul className="work-list">
              <FeatureBlock title="Test Website" id="test-id">

              </FeatureBlock>       
            </ul>
          </div>
        </test>
    </div>
  </div>
    );
}
}
export default testing;

在我的脑海中，这似乎是正确的逻辑，但不起作用。就像我说的那样，我很新，我只是想使工作变得简单，并在此处联系各个方面。任何帮助都将是巨大的！只是要求学习经验。谢谢！

顺便说一句我的文件夹结构是这样的：

src  
--testing  
----index.js  
----test.js  
--FeatureBlocks  
----FeatureBlock.js

错误列表：

Answer 1

您的FeatureBlock组件需要一个src道具（传递给Link组件-this.props.src），但是在您食用{{1}时，您永远不会提供它}在FeatureBlock组件中（请参见testing）。

您需要提供<FeatureBlock title="Viiv Healthcare Product Website" id="viiv-healthcare"> </FeatureBlock>这样的src道具

Answer 2

发生此错误是因为似乎to组件的<Link>属性从未获得props值，因为您没有在组件消耗中定义。

无论何时尝试使用道具，都意味着您正在向组件提供其他信息，即

您应该在组件中传递道具：

<FeatureBlock title="Test Website" id="test-id" src="pass prop value here"/>

您可以在组件中使用以下哪种方式：

render() {
       // you can also destructure props as here  
       const { src, id } = this.props;

       return (
           <li className="work-list-item" id={id}>
               <Link to={src}>link text</Link>
           </li>
       )
}

您可以在这里深入研究：

https://reactjs.org/docs/components-and-props.html

Answer 3

在FeatureBlock组件中提供的任何属性，例如

Link to={this.props.src}
width={this.props.width}
height={this.props.height}
src={this.props.src}
alt={this.props.alt}
<h2>{this.props.title}</h2>
{this.props.contentClass}

您需要像这样传递所有这些道具。

 <FeatureBlock title="Test Website" id="test-id" src='some-link-here' width='10px' height='10px' alt='img-caption' contentClass='some-contents-here'/>

使用组件的React.JS

3 个答案: