Reactjs 反应JSX和FirstSibling或FirstChild_Reactjs_React Jsx

Reactjs 反应JSX和FirstSibling或FirstChild

reactjs

Reactjs 反应JSX和FirstSibling或FirstChild,reactjs,react-jsx,Reactjs,React Jsx,我试图用Reach JSX做一些事情，这对于JQuery来说是很简单的，但在JSX中我无法理解。我已尽可能简化了示例，问题归结为：我正在渲染许多选项卡标题，我希望第一个选项卡使用特定的类名进行渲染，以便我可以将其设置为不同的样式（默认选中的选项卡）我的Html看起来像： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ta

我试图用Reach JSX做一些事情，这对于JQuery来说是很简单的，但在JSX中我无法理解。我已尽可能简化了示例，问题归结为：

我正在渲染许多选项卡标题，我希望第一个选项卡使用特定的类名进行渲染，以便我可以将其设置为不同的样式（默认选中的选项卡）

我的Html看起来像：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Tabs</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.1/JSXTransformer.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <div id="content"></div>

        <script type="text/jsx" src="tabs.js"></script>

        <script type="text/jsx">
            /**
            * @jsx React.DOM
            */

            React.renderComponent(<Tabs><Tab title="Tab1"></Tab><Tab title="Tab2"></Tab></Tabs>,  document.getElementById('content'));
       </script>
   </body>
</html>

/**
  * @jsx React.DOM
 */

var Tab = React.createClass({
    render: function() {
        return (
          <li className="tab">
                {this.props.title}
          </li>
      );
    }
});

var Tabs = React.createClass({
    render: function() {
        return (
          <ul className="tabs">
                {this.props.children}
          </ul>
      );
    }
});


标签
/**
*@jsx React.DOM
*/
React.renderComponent（，document.getElementById（'content'）；

我的JSX看起来像：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Tabs</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.1/JSXTransformer.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <div id="content"></div>

        <script type="text/jsx" src="tabs.js"></script>

        <script type="text/jsx">
            /**
            * @jsx React.DOM
            */

            React.renderComponent(<Tabs><Tab title="Tab1"></Tab><Tab title="Tab2"></Tab></Tabs>,  document.getElementById('content'));
       </script>
   </body>
</html>

/**
  * @jsx React.DOM
 */

var Tab = React.createClass({
    render: function() {
        return (
          <li className="tab">
                {this.props.title}
          </li>
      );
    }
});

var Tabs = React.createClass({
    render: function() {
        return (
          <ul className="tabs">
                {this.props.children}
          </ul>
      );
    }
});

/**
*@jsx React.DOM
*/
var Tab=React.createClass({
render:function（）{
返回(

{this.props.title}

);
}
});
var Tabs=React.createClass({
render:function（）{
返回(

{this.props.children}

);
}
});

我想在第一个表中添加一个类名，比如“selected”或“active”，但我不知道该怎么做

有人能帮忙吗？

您说过要选择第一个选项卡并为其分配一个类名。我认为它的解决方案相当简单，与此类似（我没有测试它）：

非常感谢你的回复。我取得了良好的初步进展，但后来遇到了困难。我的数据将包含选项卡标题列表和选项卡内容列表。我需要与内容共享活动选项卡，以便显示正确的内容。我试图在顶级组件级别使用state，但我不知道如何使用{this.props.children}语法向下传递值。我有一个JSFIDLE示例，有人能帮忙吗？我创建了另一个示例来演示我的问题。选项卡标题使用的selectedTab与选项卡内容使用的选项卡标题不同。我试图将其更改为使用由包含控件控制的状态元素，但很难将值传递给子控件。有人能帮忙吗？您可能想更改此行

返回this.state.selectedTabNo==i？“选定”：“隐藏”返回this.state.selectedTabNo==i？“选定”：“选定”如果不想隐藏未选中的内容。我设法将其与其他一些位和BOB一起使用，以获得我满意的效果。非常感谢