Question

我正在关注react-redux tuto：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传递＆＃34;活跃＆＃34; value和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

请澄清。

Answer 1

在React中，您可能有两种类型的组件。扩展<link rel="stylesheed" src="http://mysite/library/style.css"> <script src="mysite/library/script.js">的类或只是一个vanilla JavaScript函数的功能组件。功能组件也接收React.Component，类似于我们使用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 Hello { name }; }可以写成：

MyComponent

React中的function MyComponent({ name }) { return Hello { name }; }道具表示作为组件的子元素添加的内容。例如：

children

<MyComponent> <Name /> </MyComponent> or even <MyComponent> { () => Hello world } </MyComponent>和<Name />是() => Hello world等于。

在您的示例中，props.children将放在children内。例如：

FilterLink

Answer 2

children道具来自于调用它时可能在Link组件内部（包裹）的组件，例如：

<Parent>
 <Comp1 />
 <Comp2 />
</Parent>

在此代码中：Comp1和Comp2是Parent组件的子级。

React-redux教程：孩子们来自哪里

2 个答案: