Question

这是我的App组件：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.clickHandler = this.clickHandler.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    console.log("nextProps===>", nextProps);
  }
  clickHandler() {
    const { isLoading, request } = this.props;
    request();
  }
  render() {
    return (
      <span>
        <button onClick={this.clickHandler}>Request</button>
      </span>
    );
  }
}

以下是我渲染的方式：

let isLoading = false;
const request = function() {
  isLoading = true;
};

ReactDOM.render(
  <App isLoading={isLoading} request={request} />,
  document.querySelector("#app")
);

当用户点击按钮时，isLoaing变量将会改变。但是，<App />似乎没有收到它，因为componentWillReceiveProps没有调用

为什么？

Answer 1

即使您的Prop isLoading正在更新，也没有任何内容会触发重新呈现

ReactDOM.render(
  <App isLoading={isLoading} request={request} />,
  document.querySelector("#app")
);

并且由于未再次调用ReactDOM.render，因此App组件

中未收到新道具

您也可以编写一个App的父级来接收isLoading道具并重新渲染

class Parent extends React.Component {
   state = {
      isLoading: false
   }
   request = () => {
      this.setState({ isLoading:true });
   }
   render() {
      return <App isLoading={isLoading} request={request} />
   }
}


ReactDOM.render(
  <Parent />,
  document.querySelector("#app")
);

React Component不会收到新的道具

1 个答案: