ruby-on-rails - 我将如何在 Hyperstack 组件中使用 React-Bootstrap？

Question

我有一个基本的 Hyperstack 应用程序，并想对其进行样式设置。

我可以与React-Bootstrap集成吗？这是一种推荐的方法，还是我应该看看其他框架（例如Material UI？）

任何指向文档或示例代码的指针将不胜感激！

Answer 1

是的，将ReactBootstrap、MaterialUI、SemanticUIReact或任何其他组件库与Hyperstack集成非常简单

这些库为您提供了按钮、排版、模态和大量有用的 UI 工具，它们构成了您的 UI。列出的所有示例都是基于 React 的，因此每个组件（假设Button是一个 React 组件）。

使用 Hyperstack 的优势意味着您可以用 Ruby 编写整个前端并像使用 Ruby 类一样使用这些库组件。

例如，在 ReactBootstrap 中，以下 JSX：

<Button variant="primary">
  I am a button
</Button>

会变成 Ruby

Button(variant: :primary) { 'I am a button' }

如果我们看一个稍微复杂的例子，一个具有加载状态的 Button：

ReactBootstrap 网站上的 JSX 示例是：

function simulateNetworkRequest() {
  return new Promise(resolve => setTimeout(resolve, 2000));
}

class LoadingButton extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleClick = this.handleClick.bind(this);

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

  handleClick() {
    this.setState({ isLoading: true }, () => {
      simulateNetworkRequest().then(() => {
        this.setState({ isLoading: false });
      });
    });
  }

  render() {
    const { isLoading } = this.state;

    return (
      <Button
        variant="primary"
        disabled={isLoading}
        onClick={!isLoading ? this.handleClick : null}
      >
        {isLoading ? 'Loading…' : 'Click to load'}
      </Button>
    );
  }
}

render(<LoadingButton />);

Ruby 中使用 Hyperstack 的相同代码（添加了 HTTP.get）：

class LoadingButton < HyperComponent
  before_mount do
    @isLoading = false
  end

  render do
    Button(variant: :primary, disabled: @isLoading) do
      @isLoading ? 'Loading' : 'Click to load'
    end.on(:click) do
      mutate @isLoading = true
      simulate_network_request
    end
  end

  def simulate_network_request
    promise = Promise.new
    HTTP.get("some_url") do |req|
      mutate @isLoading = false
      promise
    end
  end
end

将 ReactBootstrap 安装到 Hyperstack 中非常简单。只需按照以下说明操作：https ://hyperstack.org/edge/docs/dsl-client/components#importing-javascript-or-react-libraries

同样的方法适用于 Ruby 代码中使用的任何React 库。