Question

我想知道如何在我的doorsItem组件中访问我的道具项目。我在父母中的代码是这样的： 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道具的最佳方式是什么？

感谢您的阅读并抱歉这个令人反感的问题！

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>

有关the official documentation的更多信息。

通常，在使用基于类的组件时，我们应该定义propTypes和defaultProps。这使我们能够更好地理解要使用的基于类的组件props，并为要插入的props提供验证。更多信息here（警告：自React v15.5起移至单独的包中）。

最后，you can use context，这不是推荐的方式，但有时可能会有所帮助。

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

1 个答案: