React.JS с использованием компонента

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

Эта ошибка возникает, когда кажется, что свойство to компонента <Link> никогда не получает значение реквизита, поскольку вы не определили его в потреблении компонента.

Всякий раз, когда вы пытаетесь использовать реквизиты, это означает, что выпредоставление дополнительной информации вашему компоненту, например

Вы должны передавать реквизиты в компоненте как:

<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 2

Ваш компонент FeatureBlock ожидает src проп (который передается компоненту Link - this.props.src), но вы никогда не предоставляете его, когда используете FeatureBlock в компоненте testing (см. <FeatureBlock title="Viiv Healthcare Product Website" id="viiv-healthcare"> </FeatureBlock>).

Вы должны предоставить src реквизит, подобный этому <FeatureBlock title="Viiv Healthcare Product Website" id="viiv-healthcare" src={some variable} />

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