Use a Conditional in a Render Function

Use a Conditional in a Render Function

어떻게 당신은 render()함수 안에 조건문을 사용할 수 있을까?

 

TodaysPlan.js 를 선택해보자.

 

렌더함수의 내부에 위치했지만 return 구문 전에 있는  if문을 보자. 

이것은 렌더 함수에 사용되는 if 문을 볼 수 있는 거의 유일한 방법이다.

 

import React from 'react';
import ReactDOM from 'react-dom';

const fiftyFifty = Math.random() < 0.5;

// New component class starts here:
class TonightsPlan extends React.Component {
  render() {
    if (fiftyFifty) {
      return <h1>Tonight I'm going out WOOO</h1>;
    } else {
      return <h1>Tonight I'm going to bed WOOO</h1>;
    }
  }
}

ReactDOM.render(
	<TonightsPlan />,
	document.getElementById('app')
);

import React from 'react';
import ReactDOM from 'react-dom';

class TodaysPlan extends React.Component {
  render() {
    let task;
    if (!apocalypse) {
      task = 'learn React.js'
    } else {
      task = 'run around'
    }

    return <h1>Today I am going to {task}!</h1>;
  }
}

ReactDOM.render(
	<TodaysPlan />,
	document.getElementById('app')
);

 

 

https://www.codecademy.com/courses/react-101/lessons/react-components-advanced-jsx/exercises/render-function-if-statement