Question

我是React的中级开发人员，我想对实现道具过滤的最佳做法提出建议。

的确，我意识到我在对这些道具进行分类时非常有限：

我是否必须将这些道具置于状态，然后进行显示/排序国家
有没有一种方法可以直接显示道具并对其排序？

示例：

app.js

@connect(({ events }) => ({ events }))
class EventList extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    const { dispatch } = this.props
    dispatch({type: 'events/GET_ALL_EVENTS'})
  }

  render() {
    const { events } = this.props
    const { allEvents } = events

    return (
      <div>
        <div className="card">
           <div className="card-body">
              <EventsAfter events={allEvents} />
           </div>
         </div>
      </div>
    )
  }
}

export default EventList

EventsAfter.js

class EventAfter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateSort: "next_3_day",
    };
  }

  sortDate = value=> {
    this.setState({ dateSort: value.target.value })
    /* NEED TO SORT PROPS ARRAY OF EVENTS HERE */
  }

  render() {
    const { events } = this.props
    const { dateSort } = this.state

    return (
      <div>
        <div className="row">
          <div className="col-lg-12">
            <div>
              <div style={{display:"inline-block", paddingBottom:'10px'}}>
                <Radio.Group size="default" value={dateSort} onChange={this.sortDate}>
                  <Radio.Button value="next_3_day">Les trois prochains jours</Radio.Button>
                  <Radio.Button value="this_week">Cette semaine</Radio.Button>
                  <Radio.Button value="next_week">La semaine prochaine</Radio.Button>
                </Radio.Group>
              </div>

            </div>
          </div>
        </div>
        <div className="air__utils__scrollTable">
          <Table
            columns={[
              {
                title: 'Evenements',
                dataIndex: 'name',
                key: 'name',
                className: 'text-gray-6',
              },
              {
                title: 'Date',
                dataIndex: 'date',
                key: 'date',
                className: 'text-gray-6',
                render: d => {
                  return <Moment format='LLL'>{d}</Moment>
                },
                sorter: (a, b) => a.date.size - b.date.size,
              }
            ]}
            dataSource={events}
            scroll={{ x: '100%' }}
          />
        </div>
      </div>
    )
  }
}

export default EventAfter

在第一个文件中，我将事件（表）发送到子组件“ EventAfter ”。在第二个文件中，当用户单击单选按钮时，它将更改排序状态（ next_3_day，this_week，next_week ）。

我希望（但不能），仅对符合条件的事件进行排序和显示，而不修改原始表（以便我可以显示整个表）。

你能帮我吗？我在这部分上使用正确的反应还是存在模式？

非常感谢，这对我有很大帮助。

Answer 1

您的表列已具有排序器功能，允许重新排序，因此您无需将排序后的值存储在状态中。

尽管您有一个名为dateSort: "next_3_day"的东西，表面上看起来您想过滤数据集（而不仅仅是排序），但这是另一个问题。

您似乎想执行以下操作：

dataSource={this.state.dateSort === 'next_3_day' ? events.filter(x=>x.date > new Date((new Date()).getTime() + (60*60*24*3))):this.events}

[并扩展到其他3个dateSorts`选项]

我个人不会将过滤后的值存储在状态中，我只会创建一个过滤它的函数。

您正在使用dateSort设置状态，以便组件将重新呈现，并允许从父组件传递新数据。

我还建议在这里使用https://date-fns.org/来简化日期运算。

我看不到您输入数据的类型，但是a.date.size对我来说似乎有点可疑。您目前的排序是否可以使用此值？

Answer 2

在您的情况下，最好将其称为排序的过滤，否则听起来有点混乱，排序通常意味着排序...

但是，是的，最好在state状态下创建一个属性，该属性将包含已过滤或有序的数组。

this.setState({ 
  dateSort: value.target.value 
  eventsFiltered: this.props.event.filter(someFilterFunc)
})

并将此this.state.eventsFiltered

传递给子组件

React-道具过滤最佳实践

2 个答案: