React复用组件时修改文本和图片值出错，求排查解决方法

嘿，别担心，刚接触React和编程遇到这类问题太正常啦！我帮你梳理下代码里的两个关键问题，以及对应的解决办法：

1. 函数组件误用了this获取属性 #

你的Feature是函数式组件，函数组件没有组件实例，不存在this对象，直接用this.title或者this.img肯定会报错。正确的做法是让组件接收props参数，从props里读取传递过来的属性。

修改后的Feature组件代码：

import React from 'react';

// 直接解构props里的title和img，写法更简洁
const Feature = ({ title, img }) => (
  <div>
    <div>{title}</div>
    <div><img src={img} alt={title} /></div> {/* 建议加上alt属性，提升可访问性 */}
  </div>
);

export default Feature;

如果你习惯完整接收props对象，也可以这么写：

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

2. React组件命名不符合规范 #

你的burger组件用了小写开头的命名，在React中，自定义组件必须以大写字母开头，否则React会把它当成原生HTML标签解析，导致组件无法正常渲染。

修改后的Burger组件代码：

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

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

// 组件名改为大写开头的Burger
const Burger = (props) => (
  <div className="wrapper">
    <Feature title={bacon.title} img={bacon.img}/>
  </div>
);

export default Burger;

这样修改之后，你的组件就能正常接收属性并渲染啦～

内容的提问来源于stack exchange，提问作者changshou