Vue的自定义指令，对应react怎么写，写个权限按钮吧

React 中没有像 Vue 一样的自定义指令，但可以使用组件的 props、state 和生命周期方法来实现类似的功能。

下面是一个简单的权限按钮组件：

import React from 'react';

class AuthButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isAuthorized: false,
    };
  }

  componentDidMount() {
    // 模拟异步获取权限信息
    setTimeout(() => {
      const { permission } = this.props;
      const isAuthorized = Math.random() > 0.5; // 随机授权

      if (isAuthorized && permission) {
        this.setState({
          isAuthorized: true,
        });
      }
    }, 1000);
  }

  render() {
    const { children, className } = this.props;
    const { isAuthorized } = this.state;

    return (
      <button className={className} disabled={!isAuthorized}>
        {isAuthorized ? children : '无权限'}
      </button>
    );
  }
}

export default AuthButton;

使用方式：

<AuthButton permission="edit" className="my-button">
  编辑
</AuthButton>

该组件会根据传入的 permission 属性异步获取权限信息，并根据授权情况决定是否禁用按钮和显示内容。在权限信息加载期间，按钮会显示为不可用状态。

注意，这只是一个简单的示例，实际应用中需要根据具体需求来实现更复杂的权限控制逻辑。