Question

我正在使用自述文件中指出的常见用例：

const Desktop = props => (
  <Responsive {...props} minWidth={1680} maxWidth={2560} />
)
const LaptopL = props => (
  <Responsive {...props} minWidth={1440} maxWidth={1679} />
)
...

并且我有一个prop（bottleState），我试图将其传递给响应组件（例如，桌面）中的特定组件：

const WineHeader = ({ bottleState }) => (
  <HeaderCard>
    <Desktop>
      <WineBox />
      <WineBackgroundBox />
      <VineyardBackgroundBox />
      <WineInfoContainer>
        <LeftContainer>
          <WineTypeBox bottleState={bottleState} />
          <WineTitleBox bottleState={bottleState} />
          <WineDescriptionBox bottleState={bottleState} />
        </LeftContainer>
        <WineProperties />
      </WineInfoContainer>
    </Desktop>

    <LaptopL>
      <WineBox />
      <WineBackgroundBox />
      <VineyardBackgroundBox />
      <WineInfoContainer>
        <LeftContainer>
          <WineTypeBox />
          <WineTitleBox />
          <WineDescriptionBox />
        </LeftContainer>
        <WineProperties />
      </WineInfoContainer>
    </LaptopL>
     ...
  </HeaderCard>
)

WineHeader.propTypes = Object.freeze({
  bottleState: PropTypes.object, //eslint-disable-line
})

export default WineHeader

在我尝试访问它的上述子组件之一中记录bottleState属性时-它不可用（日志返回undefined）：

const WineTypeBox = ({ bottleState }) => (
  <WineTypeStyle>{console.log(bottleState)}</WineTypeStyle>
)

> undefined  ---- WineTypeBox.jsx?a13c:36

当我简单地删除响应组件时，我可以按预期的方式访问bottleState属性：

const WineHeader = ({ bottleState }) => (
  <HeaderCard>
    <WineBox />
    <WineBackgroundBox />
    <VineyardBackgroundBox />
    <WineInfoContainer>
      <LeftContainer>
        <WineTypeBox bottleState={bottleState} />
        <WineTitleBox bottleState={bottleState} />
        <WineDescriptionBox bottleState={bottleState} />
      </LeftContainer>
      <WineProperties />
    </WineInfoContainer> 
    ...
  </HeaderCard>
)

登录到控制台后返回bottleState对象：

{wineCollection: "Classics", wineType: "Semi Sweet Red", bottleName: "Khvanchkara", bottleImage: Array(1), bottleNoteText: "<p>test</p>", …}
bottleImage: ["http://localhost/uploads/bottle.png"]
bottleName: "Khvanchkara"
bottleNoteText: "<p>test</p>"
temperatureHigh: null
vintage: null
volume: null
wineCollection: "Classics"
wineType: "Semi Sweet Red"
__proto__: Object ---- WineTypeBox.jsx?a13c:36

有什么想法为什么会这样？我尝试在WineHeader功能组件中定义桌面函数，因为那是我从this.props中获取bottleState属性的函数，但这不会改变其行为；当在Desktop组件的return语句前抛出调试器时，我可以清楚地看到传入的bottleState属性，我什至不需要传递它，因为我直接将其传递给嵌套在DOM树下的其他组件，而没有桌面组件没有包装它们时出现任何问题，但是我需要访问该道具的其他组件嵌套在桌面组件中的事实导致该道具由于某种原因被阻止。任何帮助是极大的赞赏。谢谢，

科里

Answer 1

因此，您可能希望看到<Desktop>并实际上看到<LaptopL>屏幕：

const WineHeader = ({ bottleState }) => (
  <HeaderCard>
    <Desktop>
      ...
      <WineTypeBox bottleState={bottleState} />
      <WineTitleBox bottleState={bottleState} />
      <WineDescriptionBox bottleState={bottleState} />
      ...
    </Desktop>

    <LaptopL>
      ...
      <WineTypeBox /> // <- pass props here
      <WineTitleBox /> // <- pass props here
      <WineDescriptionBox /> // <- pass props here
      ...
    </LaptopL>
  </HeaderCard>
)

您在上面的评论中提到修复它。恭喜！

供参考：

使用响应式响应来添加<Default ...>包装器也是一种好习惯。

这可能在其他库中发生，并且需要其他修复程序。

例如。道具最初被分解为({ bottleState })可能意味着react-responsive无法访问props才能将其传递给子元素。当外部库发生这种情况时，可以通过几种方法对其进行修复：

使用传播语法传递道具

const WineHeader =道具=>（ ... ... ... ）

OR

const WineHeader = ({bottleState, foo, bar}) => (
  ...
    <Desktop>
      ...
      <WineTypeBox {...{bottleState, foo, bar}} />
      ...
    </Desktop>
)

传递单个组件或包装库JSX内部组件，因为该库无法处理多个子组件

const WineHeader =（{bottleState}）=>（ ...

OR

const WineHeader = ({bottleState}) => (
  <HeaderCard>
    <Desktop>
      <Fragment>
        <WineTitleBox bottleState={bottleState} />
        <WineTitleBox bottleState={bottleState} />
        ...
      </Fragment>
    </Desktop>

使用React Context

反应敏感：无法将道具传递给响应组件的子对象

1 个答案: