将数据从父组件传递给子组件| React，Redux

Question

我想知道如何在我的doorItem组件中访问道具项目。 我在父级中的代码是： const doors = this.props.doors.data.map(item => <DoorsItem item={item} />)

我的DoorsItem组件之前看起来像这样：

const DoorsItem = ({ item, customer }) =>
  <Grid>
    <Row key={item._id}>
      <Col style={{ width: '100%' }}>
        <ul className="door-list">
          <li className="door-flex-container">
            <div className="door-flex-item-1">
              <h4 className="title-text-container">
                {item.address.street} // Can use 'item' here

但是我想将其与redux连接起来，所以最终得到了以下结果：

class DoorsItem extends Component {
  render() {
    return (
      <Grid>
        <Row>
          <Col style={{ width: '100%' }}>
            <ul className="door-list">
              <li className="door-flex-container">
                <div className="door-flex-item-1">
                  <h4 className="title-text-container">
                    {/* How can I use it here? */}
                  </h4>
                </div>

所以我想知道什么是访问的最佳途径item在我的新的编码器件的道具？

感谢您的阅读，并很抱歉nooby的问题！

Answer 1

当你在做<DoorsItem item={item} />你分配item支柱，这意味着该组件内可以用它像this.props.item甚至更好const { item } = this.props; 并在以后使用item局部变量。 因此，例如：

const { item } = this.props; return <span>this is the {item} you're looking for</span>

有关详细信息，请参阅官方文档 。

通常，当使用基于类的组件时，我们应该定义propTypes和defaultProps 。 这给了我们更好的理解基于类的组件的props使用，并提供验证的props插入。 此处有更多信息（警告：自React v15.5起已移至单独的软件包中）。

最后， 您可以使用context ，这不是推荐的方法，但有时会有所帮助。