React.js의 3 진 연산자를 사용하여 XML 함수를 호출합니다.

Question

JSX에서 3 진 연산자를 사용하여 사용자가 선택한 일부 상태에 따라 일부 구성 요소를 생성합니다. 내가하고 싶은 것은 컴포넌트를 생성하는 것과 함께 JavaScript 함수 나 어떤 문장을 호출하는 것이다.

이 내 관련 코드 : 도움의 어떤 종류가 이해할 수있을 것이다

{ 
     this.state.isTextEditor === 'yes' 
      ? 
     <Row> 
      <Col sm={12}> 
      <TextEditor placeholder="Job description here"/> 
      </Col> 
     </Row> 
      (and someGlobalVariable += 'classActive') 
      : 
     ...//same code as above 
} 

:

  { 
      this.state.isTextEditor === 'yes' 
       ? 
      <Row> 
       <Col sm={12}> 
       <TextEditor placeholder="Job description here"/> 
       </Col> 
      </Row> 
       : 
      <FormGroup controlId="companySignupFormJD"> 
       <Row> 
       <Col sm={12}> 
        <SelectFile 
        ref="JD-file" 
        image={false} 
        controlId={'JD-file'} 
        supportedFiles={supportedDocs} 
        btnLabel={'Select File'} 
        helpText={'PDF, DOC DOCX or TXT'} 
        onChange={::this.setJDFile} /> 
       </Col> 
       </Row> 
      </FormGroup> 
      } 

내가하고 싶은 것은이 같은 것입니다.

Answer 1

, 자세한 내용은 여기 여기 https://facebook.github.io/react/tips/if-else-in-JSX.html

(위) 문서 페이지에서 관련 코드를 찾을 수 있습니다

var loginButton; 
if (loggedIn) { 
    loginButton = <LogoutButton />; 
} else { 
    loginButton = <LoginButton />; 
} 

return (
    <nav> 
    <Home /> 
    {loginButton} 
    </nav> 
); 

따라서 귀하의 경우는

일 것

 if(this.state.isTextEditor === 'yes'){ 
      data = <Row> 
      <Col sm={12}> 
       <TextEditor placeholder="Job description here"/> 
      </Col> 
      </Row>; 
     } else { 
     data = <Row> 
      <Col sm={12}> 
       <TextEditor placeholder="Job description here"/> 
      </Col> 
      </Row>; 
     } 

이상에서는을 추가하면 jsx가 렌더링되어야합니다.

Answer 2

3 진수 연산자는 세 가지를 처리하기 때문에 호출됩니다. 하나의 3 진 구문에서 여러 연산을 스핀 오프 할 수는 없습니다. 그들은 주로 값을 저장하거나 하나의 함수를 호출하는 데 사용됩니다.

그냥 if/else 문을 사용하십시오. 그들은 일반적으로 어쨌든 더 명쾌하다. JSX에서 if를 사용하는 방법