标签: react-jsx

我正试图在我的所有页面的顶部放置一个导航栏.这是路由器:

App = React.createClass({
    render: function() {
        <div>
            <NavBar />
            <Locations hash className="Router">
                <Location path="/" handler={MainPage} />
                <Location path="/help" handler={HelpPage} />
                <Location path="/about" handler={AboutPage} />
                <NotFound handler={NotFoundPage} />
            </Locations>
        </div>
    }
});

请注意Locations标记中的哈希参数.当我这样使用路由器时,<NavBar />组件中的链接不使用哈希.但是,如果我<NavBar />在每个单独的组件中包含,则哈希链接按预期工作.是否有一个地方可以包含<NavBar />在路由器显示的所有页面上呈现的地方？

我最近开始学习ReactJS,但我对异步调用感到困惑.

假设我有一个带有用户/通过字段和登录按钮的登录页面.组件看起来像:

var Login = React.createClass({

    getInitialState: function() {
        return {
            isLoggedIn: AuthStore.isLoggedIn()
        };
    },

    onLoginChange: function(loginState) {
        this.setState({
            isLoggedIn: loginState
        });
    },

    componentWillMount: function() {
        this.subscribe = AuthStore.listen(this.onLoginChange);
    },

    componentWillUnmount: function() {
        this.subscribe();
    },

    login: function(event) {
        event.preventDefault();
        var username = React.findDOMNode(this.refs.email).value;
        var password = React.findDOMNode(this.refs.password).value;
        AuthService.login(username, password).error(function(error) {
            console.log(error);
        });
    },

    render: function() {

        return (
                <form role="form">
                    <input type="text" ref="email" className="form-control" id="username" placeholder="Username" />
                    <input type="password" className="form-control" id="password" ref="password" placeholder="Password" />
                    <button type="submit" className="btn btn-default" onClick={this.login}>Submit</button>
                </form> …

我正在用React构建一个导航栏.导航栏具有各种导航项.单击其中一个导航项时,必须将"活动"类添加到单击的项目中(如果新的状态跟踪处于活动状态,则可以轻松实现此部分).

但是,当"活动"类添加到其中一个导航项时,必须从当前具有该活动类的任何其他导航项中删除活动类.使用jQuery这很简单,但我猜这不是React的最佳实践.从兄弟导航项中删除"活动"类的理想方法是什么？

当在文件中看到jsx时，有没有一种方法可以自动检测sublime的扩展名？如果看不到jsx，则恢复为默认值？目前，我正在使用babel-sublime在jsx上突出显示语法。

我有一个 React 类（JSX），其中包含以下（这里稍微简化了）代码：

var Select = React.createClass({
  onChange: function (ev) {
     console.log(ev.target.value);
  },
  render: function() {
     var optionsHtml = this.state.options.map(function (el) {
                    console.log(this.props.getValue(el);
                    return (
                        <option key={this.props.getValue(el)}
                                value={this.props.getValue(el)}> { this.props.getLabel(el) } 
                        </option>
                    )
                });
    return <select onChange={this.onChange}>
     {optionsHtml}
    </html>
}

在渲染函数中，console.log 在初始化 Options-HTML 并设置值时返回整数值（即 1, 2, 3），但是在 onChange-method 中的值是一个字符串（即 "1", "2 ", "3") 当实际的选择框值改变时。

解决此问题的一种方法是在 onChange 中使用该值之前检查并将其转换为 Number，但还有其他方法可以做到吗？

编辑：

选项数组可能看起来像这样

var options = [
  { id: 1, name: "Test" },
  { id: 2, name: "Test2" },
  { id: 3, name: …

我有一些组件，其中一些用 px 调整大小。其他我想要可变大小。但是，由于组件具有固定的 px 高度，因此可变大小的组件不是页面的恒定百分比。所以我希望一个组件大约是屏幕高度（'80vh'）的 80% 减去另一个组件的高度。我希望使用类似的东西

style={{height:'80vh-40px'}} 

但这不起作用。

我找到了这个页面很接近，但我的程序无法识别该 calc 函数。我是否需要从某个图书馆要求它？

关于如何使这项工作的任何想法？

谢谢！

我在jsx中有一个链接.我可能会在未来为链接创建新组件,但现在我想使用简单的jsx.我也有一个布尔道具告诉我是否应该渲染链接.如果不是我想在一个span或中呈现纯文本div.

这是我现在这样做的方式:

{isPassed && <a href={'/uri'}>
  <span>Import</span>
</a>}
{!isPassed && <span>Import</span>}

这就是我可以做得更好的方法:

{isPassed && <a href={'/uri'}>
  <span>Import</span>
</a> || <span>Import</span>}

像这样处理条件渲染的最佳实践是什么？我想让它更具可读性.第一个示例复制条件,在第二个示例中,不明显将要呈现的内容.

我想在title道具中执行以下操作：

<Tab title={<Glyphicon glyph="time" /> Real-Time}></Tab>

但它不起作用。我明白了Unexpected token, expected }。所以 astring不能跟随 React 组件。

如何让它在没有数组、函数、创建新组件等的情况下工作。 React 是否有办法在一行中完成，就像我的例子一样？

我在渲染中添加了一个条件,然后突然停止显示.这是我正在使用的代码.

 {this.state.sdata.map((sdata, i) => 
   {i < 5 && 
    <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
   }
  )
 }

我想只显示sdata中的4个项目.有人请帮忙.

我收到以下错误:

警告:div传递了之前已经变异的样式对象.变异style已被弃用.考虑事先克隆它.检查render的Tab.以前的风格:{padding: "20px", display: "block"}.变异风格:{padding: "20px", display: "none"}.

从我render()在React/JSX中的方法中的代码:

const clonedChildren = React.Children.map(this.props.children, (el, i) => {
  let visibility = 'none';
  if (i === this.state.activeIndex) visibility = 'block';
  const newStyle = { display: visibility };
  const style = Object.assign(el.props.style, newStyle);
  return React.cloneElement(el, { style });
});

为什么会发生这种错误？我已经克隆了元素.我怎样才能解决这个问题？