React.JS 使用组件答案

【问题标题】：React.JS using a componentReact.JS 使用组件
【发布时间】：2019-08-10 06:43:21
【问题描述】：

所以我正在构建一个简单的 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

错误列表：

【问题讨论】：

这里的“不工作”是什么意思？你遇到了什么错误？
您希望this.props 包含宽度高度等，但是您不会将这些道具传递给<FeatureBlock ... />
因为你刚刚进入 React，所以看看 Hooks 而不是 Classes

标签： javascript reactjs components

【解决方案1】：

出现此错误是因为 <Link> 组件的 to 属性似乎永远不会获得 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

【讨论】：

【解决方案2】：

您在 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'/>

【讨论】：

【解决方案3】：

您的 FeatureBlock 组件需要一个 src 属性（它被传递给一个 Link 组件 - this.props.src），但是在您的 testing 组件中使用您的 FeatureBlock 时，您永远不会提供它（参见 @ 987654327@).

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

【讨论】：