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

Question

我有一个基本的 Hyperstack 应用程序，想为其设计样式。

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

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

Answer 1

是的，集成很简单ReactBootstrap, MaterialUI, SemanticUIReact or ANY of the other component libraries with 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' }

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

来自 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 库也是如此。

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

How would I use React-Bootstrap in a Hyperstack component?

ruby-on-rails

ruby

reactjs

opalrb

hyperstack