Question

我曾问过这个question，它提出了更多关于参数在组件之间传递方式的问题。

让我们假设你有一个孩子的底部或孩子有三个组成部分。中间还是孩子。和顶部 - 在我的情况下是容器。

我目前有底部组件。：

const GlyphiconDirectionChange = (props) => {
const { onSortDirectionChange } = props
return (
  <span onClick={() => onSortDirectionChange('Ascending')} className='glyphicon glyphicon-sort-by-attributes'></span>
)

请注意单个变量“Ascending”的设置。

中间或子组件具有：

  export const TableHeaders = (props) => {
  const { onSortDirectionChange } = props;
  return (
    <GlyphiconDirectionChange onSortDirectionChange={onSortDirectionChange} />
  )

顶部或容器组件具有：

  class ClientsContainer extends Component {

  handleSortDirection = (values = {}) => {
  const { sortDirection, query, sortBy  } = this.props
    const direction = values
    const searchParams = {
      query,
      sortBy,
      direction,
      ...values,
      currentPage: 1,
    }
    console.log('changeSortDirection()!', searchParams)
    this.fetchClients(searchParams)
  }

  return (
    <div className="row">

      <TableHeaders onSortByChange={this.handleSortBy}
        onSortDirectionChange={this.handleSortDirection}
        query={query}
        currentPage={currentPage}
      />

    </div>
  )
 }

我的问题是，在这个实例中不必担心上下文，例如，为什么需要两个或更多变量来管理排序方向..如何从底部组件传递多个参数确保它应用于“HandleSortDirection”中的正确变量...如何在“GlyphiconDirectionChange”中设置第二个和第三个参数，然后如何在“HandleSortDirection”中检索它（什么是正确的语法）？

Answer 1

尝试将对象作为“底部组件”中的第一个参数传递。

const GlyphiconDirectionChange = (props) => {
  const { onSortDirectionChange } = props
  let options = {
    order: 'Ascending',
    // ... and other props you want
    offset: 10
  }
  return (
    <span
      onClick={() => onSortDirectionChange(options)}
      className='glyphicon glyphicon-sort-by-attributes' />
  )
 }

所以在'顶级组件'中，你会得到

handleSortDirection = (options = {}) => {
  const { sortDirection, query, sortBy  } = this.props
  let { order, offset } = options
  ...
}

React Redux在多个组件级别上传递多个参数

1 个答案: