小编Sei*_*lhi的帖子

如何动态更改ReactJS样式?

我试图在我的twitter bootstrap网络应用程序中运行ReactJS.我有一些使用样式的问题.

有这个div:

   ...
   <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 80%;"/>
   ...
Run Code Online (Sandbox Code Playgroud)

我正在编写一些动态进度条,并希望进行80%的更改(请查看下面的**).所以这是我在JSX中编写的代码:

  var Task = React.createClass({
  render: function() {
  return (
  <li>
    <a href="#">
      <span className="header">
        <span className="title">{this.props.type}</span>
        <span className="percent">{this.props.children}%</span>
      </span>

      <div className="taskProgress progressSlim progressBlue" >
        <div className="ui-progressbar-value ui-widget-header ui-corner-left" 
       **style="width"+{this.props.value} +"%;" />**
      </div>
    </a>
   </li>
  );
 }
});
Run Code Online (Sandbox Code Playgroud)

我阅读了一些关于内联sytles的文档,但是这个例子很轻松.

谢谢你的帮助.

编辑:

通过使用:

    style={{width : this.props.children}}
Run Code Online (Sandbox Code Playgroud)

它工作正常,但只是想知道如何强制它作为%而不是px.

javascript css reactjs

42
推荐指数
1
解决办法
7万
查看次数

如何使用 Apache 反向代理设置 SSH 端口转发

我们在互联网和后端服务器之间设置了一个代理服务器。使用 VirtualHost 指令可以很好地管理 HTTP 请求。

我们在代理后面有一个 git 服务器,我们想只使用 ssh 访问存储库,但去掉 URL 中的端口号。

例如: ssh://backend.server.com:7999 --> ssh://backend.server.com

下面是apache代理的配置:

ProxyRequests 
ProxyPreserveHost On
ProxyVia Full
AllowCONNECT 7999
Run Code Online (Sandbox Code Playgroud)

AllowCONNECT 指令应该通过 ssh 处理端口 7999,但我不确定这个配置是否足够。

当我们通过 ProxyPass 和 ProxyPassReverse 管理 http 时,我需要配置什么来管理 ssh 协议?

谢谢。

apache git ssh proxy

5
推荐指数
1
解决办法
4559
查看次数

ReactJS和复杂的JSON对象

我遵循了ReactJS教程,这对于完成更复杂的东西非常简单.

在我的例子中,我想使用一个复杂的JSON对象,它包含一个地图,一个值,一个列表等......这是代码:

    var NotificationStatus = React.createClass({
    loadNotificationsFromServer: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
          this.setState({data: data});
          console.log(this.state.data.notificationType);
        }.bind(this)
      });
    },
    getInitialState: function() {
      return {data: {}};
    },
    componentWillMount: function() {
      this.loadNotificationsFromServer();
      setInterval(this.loadNotificationsFromServer, this.props.pollInterval);
    },
    render: function() {
      return (
        <div>
          <li className="dropdown-menu-title">
              <span>You have {this.state.data.notificationCount} notifications</span>            
          </li>
          <Notifications data={this.state.data.notificationType} />
        </div>  
      );
    }
  });



  var Notifications = React.createClass({
    render: function() {
      var notificationNodes = this.props.data.map(function (notif, index) {
        return <Notification key={index}>{notif.type}</Notification>;
      });
      return <li>{notificationNodes}</li>;
      }
  });

  var …
Run Code Online (Sandbox Code Playgroud)

javascript json reactjs

4
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×2

reactjs ×2

apache ×1

css ×1

git ×1

json ×1

proxy ×1

ssh ×1