用 redux 理解 React 的文档答案

【问题标题】：Understanding documentation of React with redux用 redux 理解 React 的文档
【发布时间】：2017-03-14 22:00:05
【问题描述】：

我目前正在阅读有关 react 和 redux 的文档：

https://github.com/reactjs/redux/blob/5502940e7f139bb88bf0b67fcb838a7e3de3be6c/docs/basics/UsageWithReact.md

那里，特别是这里的代码示例：

https://github.com/reactjs/redux/blob/5502940e7f139bb88bf0b67fcb838a7e3de3be6c/docs/basics/UsageWithReact.md#containersfilterlinkjs

你可以看到这一行：

dispatch(setVisibilityFilter(ownProps.filter))

现在我的问题是，ownProps 中的 'filter' 属性从何而来？谁能给我解释一下，连接在哪里？

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

它在对 filterlink 的调用中。

components/Footer.js

import React from 'react'
import FilterLink from '../containers/FilterLink'

const Footer = () => (
  <p>
    Show:
    {" "}
    <FilterLink filter="SHOW_ALL">
      All
    </FilterLink>
    {", "}
    <FilterLink filter="SHOW_ACTIVE">
      Active
    </FilterLink>
    {", "}
    <FilterLink filter="SHOW_COMPLETED">
      Completed
    </FilterLink>
  </p>
)

export default Footer

【讨论】：

【解决方案2】：

ownProps 是由组件父级的 React 渲染调用直接传递给组件的 props。在这种情况下，有问题的组件是 FilterLink。 FilterLinks 正在通过其父级的渲染方法 Footer.js 传递一个过滤器道具。例如

<FilterLink filter="SHOW_ALL">
  All
</FilterLink>

【讨论】：