Question

如果列表页面包含表组件：

class ListingPage extends Component {
 static propTypes = {
    getTableData: PropTypes.func.isRequired,  
  };

componentDidMount() {
         this.props.getTableData(*I want to Pass in sortlist state here*);   

  }

render() {
    return (
      <div> 
 <Table />
     </div>

}

Table组件保持sortlist状态：

class Table extends Component {
constructor(props) {
    super(props);
    this.state = {    
      sortlist: 'someStringData',
    };
render() {
<div>
Table Information etc.
</div>
}

通过各种功能在表组件中更改sortlist。如何将sortlist状态传递给ListingPage组件？

Answer 1

将函数传递给Table的{{1}}，只要ListingPage发生更改，就会调用sortlist。

ListingPage组件：

class ListingPage extends Component {
  static propTypes = {
    getTableData: PropTypes.func.isRequired,
  };

  onSortChange(s) {
    console.log(s);
  }

  render() {
    return (
      <div>
        <Table onSortChange={s => this.onSortChange(s)} />
      </div>
    );
  }
}

表组件：

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sortlist: 'someStringData',
    };
  }

  somethingThatTriggersSortListToChange(s) {
    this.props.onSortChange(s);
  }

  render() {
    return <div>Table Information etc.</div>;
  }
}

Answer 2

考虑到上面的答案，当您想要将状态从子节点传递给父节点时，您也可以在这种情况下使用redux存储。进行操作调用并将状态存储在redux存储中并获取父组件中的状态。这是从子组件到父组件的另一种播放方式。

this.props.saveToStore(this.state.sortlist);

在您的操作文件中

cost SAVE_TO_STORE = “SAVE_TO_STORE”;

export function saveToStore(sortlist){
     return {
          type: SAVE_TO_STORE,
          sortlist
      }
   }

与reducer中的store状态一样，获取父组件中的状态并返回为props，即在mapStateToProps（state，props）函数中使用redux connect方法。

将状态从组件传递到父组件

2 个答案: