Question

我有两个获取示例组件的链接但是当我点击它们中的任何一个时它会被加载，当我点击另一个时它不会再渲染只有url被改变。我想在两个链接上重新渲染组件点击。有没有办法做到这一点??

Answer 1

当我在做一个反应项目时，我在某个时候遇到了类似的问题。

您需要在组件中使用 componentWillReceiveProps 功能。

  componentWillReceiveProps(nextProps){
     //call your api and update state with new props
  }

通过调用网址www.example.com/content/a componentDidMount()首次加载组件时，可以更加清晰。

现在，当您点击另一个链接时，请说www.example.com/content/b调用相同的组件，但此时道具更改，您可以在componentWillReceiveProps(nextProps)下访问此新道具，您可以使用它来调用api并获取新数据。

现在你可以保留一个通用函数说_initializeComponent（）并从componentDidMount（）和componentWillReceiveProps（）

调用它

您的路由器看起来像这样： -

ReactDOM.render((
     <Router history={browserHistory}>
      <Route path="/content" component={app}>
        <IndexRoute component={home}/>
        <Route path="/content/:slug" component={component_name} />
      </Route>
    </Router>
), document.getElementById('app'));

现在，当您致电www.example.com/content/a时，将被视为slug。如果您在www.example.com/content/b中调用该组件，则 b 将被视为slug，并且可在componentWillReceiveProps中作为nextProps参数使用。

希望它有所帮助!!

Answer 2

我自己使用这样的纯函数组件遇到了同样的问题：

export default function App() {
    const history = useHistory()
    return (
        <>
            <p>current path is {history.location.pathname}</p>
            <Link to="/abc">click me</Link>
            <Link to="/xyz">click me</Link>
        </>
    )
}

单击链接时，标题栏中的URL会更新，但组件不会重新呈现（即，显示的路径不会更新）

在这种情况下，我发现解决方案是包括对useLocation()的调用。您甚至不需要对返回值做任何事情；添加此调用后，只要位置发生更改，组件就会神奇地重新呈现。

Answer 3

反应16.3+ discourages the use of componentWillReceiveProps。

React现在建议将数据更新移至componentDidUpdate（source）：


// After
class ExampleComponent extends React.Component {
  state = {
    externalData: null,
  };

  static getDerivedStateFromProps(props, state) {
    // Store prevId in state so we can compare when props change.
    // Clear out previously-loaded data (so we don't render stale stuff).
    if (props.id !== state.prevId) {
      return {
        externalData: null,
        prevId: props.id,
      };
    }

    // No state update necessary
    return null;
  }

  componentDidMount() {
    this._loadAsyncData(this.props.id);
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.externalData === null) {
      this._loadAsyncData(this.props.id);
    }
  }

  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }

  _loadAsyncData(id) {
    this._asyncRequest = loadMyAsyncData(id).then(
      externalData => {
        this._asyncRequest = null;
        this.setState({externalData});
      }
    );
  }
}

Answer 4

使用位置钩子。

const location = useLocation();

const renderDOM = () => {
 // return your DOM, e.g. <p>hello</p>
}

useEffect(() => {
 // re render your component
 renderDOM();
},[location]);

return (
 <>
 {renderDOM()}
 </>
);

在网址更改我想重新渲染我的组件我应该怎么做

4 个答案: