ES6环境下父组件向子组件传递Props遇到问题求助

嘿，我瞅了下你的代码，问题很明显——你的子组件CarouselItem根本没接收父组件传过来的props！父组件明明传了title、client这些属性，但子组件没声明接收，自然没法在内部使用这些值。

修复步骤： #

1. 子组件声明接收Props：在CarouselItem的函数参数里，用ES6对象解构直接拿到需要的属性，写法简洁又清晰；
2. 在子组件JSX中使用Props：把传过来的动态值替换掉组件里的静态内容（比如标题、客户端信息这些）。

修改后的完整代码： #

// Parent component
const Carousel = () => (
  <nav className="projects-nav">
    <div className="projects-nav__wrapper">
      <CarouselItem 
        title="Mowat" 
        client="Jon Mowat" 
        image="/images/mowat.jpg" 
        icon="images/icons/video.svg" 
        url="/mowat.html" 
      />
    </div>
  </nav>
);

// Child component
// 用解构语法直接接收需要的props
const CarouselItem = ({ title, client, image, icon, url }) => (
  <div className="project project--mowat">
    <Letter />
    {/* 在这里使用父组件传递的props值 */}
    <h2>{title}</h2>
    <p>Client: {client}</p>
    <img src={image} alt={`${title} project preview`} />
    <img src={icon} alt="Project icon" />
    <a href={url}>View full project</a>
  </div>
);

补充小技巧： #

如果有些props是可选的，你可以给它们设置默认值，避免未传递时出现异常：

const CarouselItem = ({ 
  title = "Untitled Project", 
  client = "Anonymous Client", 
  image = "/images/default.jpg",
  icon, 
  url 
}) => {
  // 组件逻辑
};

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