Làm cách nào để đặt lại thành phần phản ứng bao gồm tất cả trạng thái có thể truy cập chuyển tiếp?

Tôi thỉnh thoảng có các thành phần phản ứng có trạng thái khái niệm mà tôi muốn đặt lại. Hành vi lý tưởng sẽ tương đương với việc loại bỏ thành phần cũ và đọc một thành phần mới, nguyên sơ.

React cung cấp một phương thức setStatecho phép thiết lập trạng thái rõ ràng của riêng các thành phần, nhưng loại trừ trạng thái ngầm định như tiêu điểm của trình duyệt và trạng thái biểu mẫu, đồng thời nó cũng loại trừ trạng thái con của nó. Nắm bắt tất cả trạng thái gián tiếp đó có thể là một nhiệm vụ khó khăn, và tôi muốn giải quyết nó một cách chặt chẽ và hoàn chỉnh hơn là chơi whack-a-nốt ruồi với mọi trạng thái bất ngờ mới.

Có API hoặc mẫu nào để làm điều này không?

Chỉnh sửa: Tôi đã làm một ví dụ nhỏ minh họa this.replaceState(this.getInitialState())cách tiếp cận và đối chiếu nó với this.setState(this.getInitialState())cách tiếp cận: jsfiddle - replaceStatemạnh mẽ hơn.

Để đảm bảo rằng trạng thái trình duyệt ngầm mà bạn đề cập và trạng thái con được đặt lại, bạn có thể thêm keythuộc tính vào thành phần cấp gốc được trả về render; khi nó thay đổi, thành phần đó sẽ bị vứt bỏ và tạo lại từ đầu.

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

Không có phím tắt nào để đặt lại trạng thái cục bộ của từng thành phần.

Bạn thực sự nên tránh replaceStatevà sử dụng setStatethay thế.

Tài liệu nói rằng replaceState"có thể bị xóa hoàn toàn trong phiên bản React trong tương lai." Tôi nghĩ nó chắc chắn sẽ bị loại bỏ vì replaceStatenó không thực sự phù hợp với triết lý của React. Nó tạo điều kiện thuận lợi cho việc làm cho một thành phần React bắt đầu cảm thấy giống như một con dao Thụy Sĩ. Điều này cản trở sự phát triển tự nhiên của một thành phần React khi trở nên nhỏ hơn và có mục đích hơn.

Trong React, nếu bạn phải sai lầm về tổng quát hóa hoặc chuyên môn hóa: hãy hướng đến sự chuyên môn hóa. Như một hệ quả tất yếu, cây trạng thái cho thành phần của bạn phải có một parsimony nhất định (mặc dù vậy, bạn có thể phá vỡ quy tắc này một cách nhã nhặn nếu bạn đang tạo ra một sản phẩm mới có thương hiệu).

Dù sao đây là cách bạn làm điều đó. Tương tự như câu trả lời (được chấp nhận) của Ben ở trên, nhưng như thế này:

this.setState(this.getInitialState());

Ngoài ra (như Ben cũng đã nói) để thiết lập lại "trạng thái trình duyệt", bạn cần xóa nút DOM đó. Khai thác sức mạnh của vdom và sử dụng một giá keyđỡ mới cho thành phần đó. Kết xuất mới sẽ thay thế bán buôn thành phần đó.

Tham khảo: https://facebook.github.io/react/docs/component-api.html#replacestate

Thêm keythuộc tính vào phần tử mà bạn cần khởi động lại, sẽ tải lại thuộc tính đó mỗi khi propshoặc stateliên kết với phần tử thay đổi.

key = {new Date (). getTime ()}

Đây là một ví dụ:

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}