Reactjs 如何使用React重用一个组件并更改另一个组件中的一些值，如文本和图像？

我对编码和反应比较陌生，所以请容忍我

我创建了一个组件，我计划在许多不同的组件上使用它。目前看起来是这样的：

import React from 'react';

const Feature = () => (
    <div>
        <div>{this.title}</div>    
        <div><img src={this.img}/></div>
    </div>
);

export default Feature;

从“React”导入React；
常量特征=（）=>(
{this.title}
);
导出默认特征；

现在，我想更改此页面中的标题和图像：

import React from 'react';
import Feature from './Feature';

const bacon = {
    title: "bacon",
    img: "./img/sample.jpg"
};

const burger = (props) => (
    <div className="wrapper">       
        <Feature title={bacon.title} img={bacon.img}/>
    </div>
);

export default burger;

从“React”导入React；
从“./Feature”导入要素；
康斯特培根={
标题：“培根”，
img:“./img/sample.jpg”
};
康斯特汉堡=（道具）=>(
);
出口默认汉堡；

我做错了什么？我该怎么办？谢谢

很简单，只需用于此目的：

import React from 'react';

const Feature = (props) => (
    <div>
        <div>{props.title}</div>    
        <div><img src={props.img}/></div>
    </div>
);

export default Feature;

从“React”导入React；
常量功能=（道具）=>(
{props.title}
);
导出默认特征；

第二个组件是相同的

const bacon = {
    title: "bacon",
    img: "./img/sample.jpg"
};

const burger = (props) => (
    <div className="wrapper">       
        <Feature title={bacon.title} img={bacon.img}/>
    </div>
);

export default burger;

const bacon={
标题：“培根”，
img:“./img/sample.jpg”
};
康斯特汉堡=（道具）=>(
);
出口默认汉堡；