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' }

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

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 />);

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

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代码中使用的 any React库，同样的方法也适用。

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

1 个答案: