如何消除React组件中props的红色下划线问题？

你的代码里的红色下划线是因为错误的语法写法导致的，问题出在这两个地方：

• 函数参数里用了带星号的*props*，还错误地用模板字符串包裹
• JSX中引用props时，同样多了星号和不必要的模板字符串包裹

修正后的代码如下：

const Residence = (props) => {
  return (
    <div className="img-container">
      <img src={props.image} width="300px" />
      <span>{props.price}</span>
      <h4>{props.name}</h4>
      <p>{props.description}</p>
    </div>
  );
};

export default Residence;

关键修改点： #

• 去掉所有用来标注的星号*，星号是你用来标记props的注释手段，不是合法的JavaScript语法
• JSX的花括号{}内部可以直接引用props属性，不需要用模板字符串`...`包裹，模板字符串在这里属于多余写法，反而会引发语法错误
• 函数参数直接写props即可，不需要额外的模板字符串包裹

这样修改后，语法错误就会消失，红色下划线也会随之消除。

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