Question

对于类组件，可以使用console.log“this.props”并获取所有道具。无状态/功能组件的等价物是什么？

例如，在以下组件中，如何快速查看所有道具？（特别是withRouter提供的那些）

const CollaboratorListContainer = ({
  searchTerm,
  handleFilterChange,
  visibleFilters,
  setVisibleFilters,
  deleteCollaborators,
  companyId,
  title,
}) => {
  return(
    <Grid fluid>
      <MainContentHeader
         title={'Collaborateurs'}
      />
      <div className="main-content">
        <Card>
          <ListFilterForm
            onFilterChange={handleFilterChange}
            values={{ searchTerm }}
            visible={visibleFilters} text  />
        <CollaboratorList
            deleteCollaborators={deleteCollaborators}
            onRowSelect={(inSelection) => setVisibleFilters(!inSelection)}
            companyId={companyId}
            searchTerm={searchTerm} />
        </Card>
      </div>
    </Grid>
 )
}


export default compose(
  withRouter,
  searchTerm,
  visibleFilters,
  handlers,
  pure
)(CollaboratorListContainer);

Answer 1

在stateless functional组件中，props可以从函数argument中获取，如

const MyComp = (props) => {
   return <div>Hello {props.name}</div>
}

如果你想看到特定的道具，你可以单独拆除它，但是没有办法知道特定HOC添加的道具

const CollaboratorListContainer = ({
  match,
  location,
  history,
  searchTerm,
  handleFilterChange,
  visibleFilters,
  setVisibleFilters,
  deleteCollaborators,
  companyId,
  title,
}) => {
  console.log(match, location, history);
  return(
    <Grid fluid>
      <MainContentHeader
         title={'Collaborateurs'}
      />
      <div className="main-content">
        <Card>
          <ListFilterForm
            onFilterChange={handleFilterChange}
            values={{ searchTerm }}
            visible={visibleFilters} text  />
        <CollaboratorList
            deleteCollaborators={deleteCollaborators}
            onRowSelect={(inSelection) => setVisibleFilters(!inSelection)}
            companyId={companyId}
            searchTerm={searchTerm} />
        </Card>
      </div>
    </Grid>
 )
}

Answer 2

我认为您可以使用 recompose.lifecycle（）实现这一目标：

https://github.com/acdlite/recompose/blob/master/docs/API.md#lifecycle

另外：https://medium.com/@leathcooper/using-recompose-to-make-stateless-functional-components-work-well-with-react-router-4-x-47988e20ee31

是的，它有效，我现在已经测试了这个：

import { compose, lifecycle } from 'recompose';

const log = lifecycle({
  componentDidMount() {
    console.log('all props', this.props);
  },
});

export default compose(
  injectIntl,
  withRouter,
  log,
)(Container);

React：有没有办法将console.log所有道具传递给无状态组件？

2 个答案: