Question

我目前正在开发一个组件，该组件从外部api 接收其主要内容数据。

数据是带有html内容的字符串形式，所以我使用pip install mysql-connector-python来呈现内容。

dangerouslySetInnerHTML

要求是一旦用户访问该网站5次，部分隐藏内容。目前，我正在使用 localstorage 跟踪用户访问，作为该部分的临时解决方案。

但是，当所有内容都来自外部api时，如何部分阻止内容。

Answer 1

理想情况下，如果不需要它甚至不会加载它。然后，无论是否加载了它，都可以使用一些局部变量来确定它是否应该呈现：

constructor(props) {
  super(props);
  this.state = {};
}

componentDidMount() {
  const shouldLoad = this.shouldLoad(); // Would return true/false based on localStorage value

  if (shouldLoad) {
    someDataCall().then((data) => {
      this.setState({ data });
    });
  }
}

render() {
  const data = this.state.data;

  return (
    <div>
    {data &&
      <div
        className="col col-sm-12 col-md-12 col-lg-12"
        dangerouslySetInnerHTML={{__html: this.props.postDetails.content}}>
      </div>
    }
    </div>
  );
}

这样做，仅当数据已加载时才渲染其中包含数据的div，并且仅当您的localStorage值表明应该加载数据时才会加载数据。

React中的Paywall部分内容

1 个答案: