React JSX 및 FirstSibling 또는 FirstChild

Reach JSX를 사용하여 JQuery에서 간단하게 작업하려고하지만 JSX에서 이해할 수 없습니다. 이 예제를 최대한 단순화했으며 문제는 다음과 같이 요약됩니다.React JSX 및 FirstSibling 또는 FirstChild

여러 탭 머리글을 렌더링하고 있으며 첫 번째 탭을 특정 클래스 이름으로 렌더링하여 스타일을 지정할 수 있도록하고 싶습니다. (기본 선택된 탭) 다른 모양.

/** 
    * @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> 
    ); 
    } 
});

나는 "활성" "선택"또는 같은 첫 번째 테이블에 클래스 이름을 넣어 싶지만 :

<!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은 다음과 같습니다처럼

내 HTML을 본다 나는 그것을하는 방법을 알아낼 수 없다.

아무도 도와 줄 수 있습니까?

출처

2014-10-31 Brighty

첫 번째 탭을 선택하고 className을 할당하려고한다고하셨습니다. 나는 그것의 해결책 (나는 그것을 테스트하지 않았다)이 오히려 사소한와 비슷한 생각 :

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

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

그러나보고 당신의 당신이 탭의 요소를 구현하기 위해 노력하고있다 쓰임새 즉, 난 당신이 구현해야한다고 생각 Tabs 선택한 탭의 현재 상태를 관리 할 수있는 구성 요소입니다. 답장을 보내

http://jsfiddle.net/kb3gN/7180/

var TabHeader = React.createClass({ 
    render: function() { 
     return (
      <li className={"tabHeader " + this.props.className} 
       onClick={this.props.onClick}> 
       {this.props.header} 
      </li> 
    ); 
    } 
}); 

var TabContent = React.createClass({ 
    render: function() { 
     return (
      <div className={"tabContent " + this.props.className}> 
       {this.props.content} 
      </div> 
    ); 
    } 
}); 

var Tabs = React.createClass({ 

    getInitialState: function(){ 
     return { 
      selectedTabNo : this.props.initialSelected ? this.props.initialSelected : 0 
     } 
    }, 

    getHeaderClass : function(i){ 
     return this.state.selectedTabNo == i ? "selected" : ""; 
    }, 

    getContentClass : function(i){ 
     return this.state.selectedTabNo == i ? "selected" : "hidden"; 
    }, 

    handleClick: function(i,e){ 
     this.setState({selectedTabNo:i}); 
     e.preventDefault(); 
    }, 

    render: function() { 

     var headers = []; 
     var i = 0; 

     this.props.tabs.forEach(function(tab){ 
      headers.push(<TabHeader header={ tab.header } 
          key={"tab"+i} 
          onClick = {this.handleClick.bind(this,i)} 
          className = {this.getHeaderClass(i)} />); 
      i++; 
     }.bind(this)); 

     var contents = []; 
     i=0; 
     this.props.tabs.forEach(function(tab){ 
      contents.push(<TabContent content={ tab.content } 
            key={"content"+i} 
            className = {this.getContentClass(i)} />); 
      i++; 
     }.bind(this)); 


     return (
      <div className="tabsContainer"> 
       <ul className="tabHeadings"> 
       {headers} 
       </ul> 
       {contents} 
      </div>  
    ); 
    } 
}); 

var App = React.createClass({ 
    render: function() { 
     return(<Tabs initialSelected={2} 
         tabs={[{header:"step1", content:<div>This is page 1</div>}, 
          {header:"step2", content:<div>This is page 2</div>}, 
          {header:"step3", content:<div>This is page 3</div>} ]} />); 
    } 
}); 

React.render(<App />, document.body);

출처

2014-11-02 19:52:34 nilgun

많은 감사 : 그리고 여기 당신이 시작할 수있는 예입니다. 나는 초기 진보를 잘했지만 벽에 부딪쳤다. 내 데이터에는 탭 헤드 목록과 탭 내용 목록이 포함됩니다. 올바른 콘텐츠를 표시 할 수 있도록 활성 탭을 콘텐츠에 공유해야합니다. 최상위 수준에서 상태를 사용하려고했지만 {this.props.children} 구문을 사용하여 값을 전달하는 방법을 알 수 없습니다. http://jsfiddle.net/tk5nb8hw/4/에서 JsFiddle 예제가 있습니다. 누구든지 도와 줄 수 있습니까? – Brighty

나는 나의 문제를 보여주는 또 다른 예를 만들었다. http://jsfiddle.net/b2h1kquy/1/ 탭 머리글에 사용되는 selectedTab은 탭 내용에서 사용하는 tabHeading과 다릅니다. 포함 된 요소에 의해 제어되는 상태 요소를 사용하도록 변경하려고했지만 값을 자식 컨트롤에 전달하는 데 어려움을 겪었습니다. 누구든지 도와 줄 수 있습니까? – Brighty

탭 내용도 포함하도록 답변을 업데이트했습니다. – nilgun

React JSX 및 FirstSibling 또는 FirstChild

답변

관련 문제