Question

我有这个功能：

public getPermissions() {
  const { listItems } = this.state;

  {listItems.length > 0 && listItems.map((item: Project) => {
    let web = new Web(item.ListUrl);

    web.getCurrentUserEffectivePermissions().then(perms => { 
      if (web.hasPermissions(perms, PermissionKind.ViewPages)) {
        return item.Title
      } else {
        return console.log('NOT Access');
      }
    }

我尝试在React组件中调用此函数：

public render() {
  return (
    <div>  ///error message
      {this.getPermissions()}
    </div>
  )
}

但是，我收到第一格的错误消息：

"[ts]
Type '{ children: void; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ children: void; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property 'children' are incompatible.
      Type 'void' is not assignable to type 'ReactNode'.
(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>"

此错误是什么意思？如何在render函数中调用getPermissions函数？

Answer 1

此方法不返回JSX。您应该在生命周期方法中调用此类事件，也可以在return方法的render()之前调用它，例如：

render() {
  this.getPermissions();

  return (...)
}

或componentDidMount这样的生命周期中的

    class YourComponent extends Component {  
      constructor(props) {

      super(props);
        this.state = { listItems: ... };
      }

      componentDidMount(){
        this.getPermissions();
      }

      getPermissions = () => {
        const { listItems } = this.state;

        {listItems.length > 0 && listItems.map((item: Project) => {
          let web = new Web(item.ListUrl);

          web.getCurrentUserEffectivePermissions().then(perms => { 
            if (web.hasPermissions(perms, PermissionKind.ViewPages)) {
             return item.Title
            } else {
              return console.log('NOT Access');
            }
         }
      }

      render() {
        return (...)
      }
    }

在React中调用函数

1 个答案: