javascript - React-redux 教程 : Where does children come from

<分区>

我正在关注 react-redux 教程:http://redux.js.org/docs/basics/ExampleTodoList.html

看着 link.js，我想知道 {children} 来自哪里

import React from 'react'
import PropTypes from 'prop-types'

const Link = ({ active, children, onClick }) => {
  if (active) {
    return {children}
  }

  return (
     {
        e.preventDefault()
        onClick()
      }}
    >
      {children}
    
  )
}

Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}

export default Link

容器组件 FilterLink.js 正在使用 link.js。 FilterLink 传递“active”值和 onclick 函数，但没有显式子项传递给 link.js

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

请澄清。

最佳答案

在 React 中你可能有两种类型的组件。扩展 React.Component 的类或只是普通 JavaScript 函数的功能组件。功能组件也收到 props类似于我们使用 this.props 的类(或将它们作为构造函数的第一个参数接收。例如:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { name } = this.props;

    return <p>Hello { name }</p>;
  }
}

<MyComponent name='Jon Snow' />

或者作为功能组件:

function MyComponent(props) {
  const { name } = props;

  return <p>Hello { name }</p>;
}

你的案例中的困惑来自于函数定义中直接破坏 Prop 的事实。所以MyComponent上面可以这样写:

function MyComponent({ name }) {
  return <p>Hello { name }</p>;
}

children React 中的 prop 表示作为组件的子元素添加的内容。例如:

<MyComponent>
  <Name />
</MyComponent>

or even

<MyComponent>
  { () => <p>Hello world</p> }
</MyComponent>

<Name />和 () => <p>Hello world</p>是什么props.children等于。

在你的例子中 children将是放在里面的东西 FilterLink .例如:

<FilterLink>
  <VisibleOnlyIfActiveIsTruethy />
</FilterLink>

关于javascript - React-redux 教程 : Where does children come from，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46110335/

上一篇：javascript - 我们可以在 React 应用程序中同步访问更改后的 reducer 状态吗？

下一篇：javascript - 在 IntelliJ IDEA 中调试 JavaScript

javascript - 创建自定义组件并嵌套它们

javascript - 在 React Multi Form 上提交后清除输入

javascript - react .js : Avoid updates of currently edited input

javascript - Redux 工具包中的有效负载

javascript - 将按钮绑定(bind)到根据文本框中值的大小激活的多个文本框

javascript 测试 .length 和 .length > 0

javascript - 单击事件更改复杂的 SVG (Meteor)

javascript - 识别reducer中的React组件？

javascript - 如何将 props 传递给来自不同来源的组件？