React应用中组件Props无法传递的技术求助

嘿，完全不用不好意思呀！刚上手React的时候，Props传递的小坑真的很容易踩，我帮你捋捋～

我最近刚开始学React，遇到了组件Props传不进去的问题，以下是我的相关代码：

DogDetails 组件代码 #

import React from 'react';
const DogDetails = (props) => {
  return (
    <div>
      <h4>{'Dog details of '+ props.breed}</h4>
    </div>
  )
};
export default DogDetails;

Dog 组件中返回DogDetails的方法（代码片段） #

import React , {Component} from 'react'
import DogDetails from './DogDetails';

class Dog extends Component {
  // 假设你有一个返回DogDetails的方法
  renderDogDetails() {
    // 这里大概率是问题所在：如果没传breed props，组件自然拿不到值
    return <DogDetails />; // 错误示例：未传递breed属性
    // 正确写法应该明确传递breed，比如：
    // return <DogDetails breed="Labrador" />;
    // 或者从组件的状态/自身Props中取值传递：
    // return <DogDetails breed={this.state.selectedBreed} />;
  }

  render() {
    return (
      <div>
        {this.renderDogDetails()}
      </div>
    )
  }
}

export default Dog;

从你的代码来看，DogDetails组件本身的写法是没问题的，它已经正确接收并尝试使用props.breed了。问题大概率出在调用DogDetails组件时，没有明确传递breed这个Props。

解决起来很简单：

• 如果你要传固定值，直接在组件上添加属性：<DogDetails breed="哈士奇" />
• 如果要传递动态值（比如从Dog组件的状态或自身Props里取），就用变量绑定：<DogDetails breed={this.props.dogBreed} /> 或者 <DogDetails breed={this.state.currentBreed} />

你可以检查下自己的Dog组件代码，是不是漏传这个关键的Props啦？

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