Question

我有一个名为“工具”的组件，当我在路线tools/:id上时可以访问该组件。在此页面上，我具有带有Links的按钮，但单击该按钮时，它将向URL传递不同的ID，以便显示其他工具。

getTool方法仅返回正确的组件，该组件只有一个东西，一个iFrame可以显示来自另一个网站的计算器。

因此，当我在各种工具之间来回移动时，直到单击刷新后才加载工具。否则，我得到一个错误，提示TypeError: Cannot read property 'style' of null。这是因为我有document.getElementById('calc-SOME-NUMBER')，但是SOME_NUMBER仍指的是我使用的上一个工具。该语句包含在每个工具中，您可以在下面的BCalc中使用它。

我检查了状态，当我在工具之间来回切换时，一切都正确；将正确的工具放置在减速器中。知道为什么会这样吗？我之所以使用history.go()作为一种解决方法，是因为我看不出它仍然会保留在旧工具ID上的任何原因。

const Tool = ({
  getContent,
  closeContent,
  content: { content, loading, contents },
  user,
  match,
}) => {
  const history = useHistory();

  useEffect(() => {
    scrollToTop();
    getContent(match.params.id);
    return () => {
      logView(user, match.params.id, "tool");
      closeContent();
      history.go(); // doesn't work without this line
    };
  }, [getContent, closeContent, match.params.id, user]);

  let ToolComponent;

  const listItemStyle = { paddingTop: "40px", paddingBottom: "40px" };

  return loading || content === null ? (
    <Spinner />
  ) : (
    <Container
      style={{ marginTop: "3%" }}
      fluid="true"
      className="contentCardBody"
    >
      <Card>
       <Card.Body>
          {(ToolComponent = getTool(content.content_id.path))}
                <ToolComponent />
        </Card.Body>
      </Card>
    </Container>
  );
};

Tool.propTypes = {
  content: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired,
  getContent: PropTypes.func.isRequired,
  closeContent: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  content: state.content,
  user: state.auth.user,
});

export default connect(mapStateToProps, {
  getContent,
  closeContent,
})(Tool);

此外，这是getTool（）返回的示例：

const BCalc = () => {
  const eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
  const eventer = window[eventMethod];
  const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
  eventer(
    messageEvent,
    (e) => {
      if (e.origin === 'https://EXAMPLE.com') {
        if (e.data.startsWith('height;')) {
          document.getElementById('calc-SOME_NUMBER').style.height = `${e.data.split('height;')[1]}px`;
        } else if (e.data.startsWith('url;')) {
          window.location.href = e.data.split('url;')[1];
        }
      }
    },
    !1,
  );

  return (
    <div>
      <iframe
        id="calc-SOME_NUMBER"
        src="https://EXAMPLE_CALC"
        title="tool"
        scrolling="no"
        style={{
          width: '100%',
          border: 'none',
          marginTop: '-2%',
          zIndex: '-1',
        }}
      />
    </div>
  );
};

export default BCalc;

为什么React组件仅在刷新页面后才能工作？

0 个答案: