Render Different UI Based on props

Render Different UI Based on props

 

당신은 props를 display하는 것보다 props로 더 많은 일들을 할 수있다.

당신은 결정을 하기위해 props를 사용할수도 있다. 

 

코드 에디터에서, Welcome 컴포넌트 클래스rent UI Based on props

 

 

당신은 props를 display하는 것보다 props로 더 많은 일들을 할 수있다.

 

당신은 결정을 하기위해 props를 사용할수도 있다. 

 

 

 

코드 에디터에서, Welcome 컴포넌트 클래스를 보자. 

 

import React from 'react';

export class Welcome extends React.Component {
  render() {
    if (this.props.name == 'Wolfgang Amadeus Mozart') {
      return (
      	<h2>
      	  hello sir it is truly great to meet you here on the web
      	</h2>
      );
    } else {
      return (
      	<h2>
      	  WELCOME "2" MY WEB SITE BABYYY!!!!!
      	</h2>
      );
    }
  }
}

 

당신은 Welcome이 name이라 불리는 정보의 조각을 받을 것으로 예상되는 5번째 줄에 적힌 this.props.name으로부터 말할 수 있다. 

그러나 Welcome은 전혀 정보의 이 조각을 렌더하고 있지 않다. 

대신에, 이것은 의사결정하기위한 정보를 사용하고 있다. 

 

<Welcome /> 인스턴스들은 텍스트 

WELCOME "2" MY WEB SITE BABYYY!!!! 를 렌더할 것이다.

유저가 Mozart여서 hello sir it is truly great to meet you
here on the web. 라며 더 존중적인 것을 렌더할 경우가 아닌한.

 

전달된 name은 다른 경우에는 보여지지 않는다. 

name은 화면에 보여지는 것을 결정하곤 한다. 이것은 일반적인 기법이다. 

 

//Greeting.js

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

export class Greeting extends React.Component {
  render() {
  	if (this.props.signedIn == false) {
  	  return <h1>GO AWAY</h1>;
  	} else {
  	  return <h1>Hi there, {this.props.name}!</h1>;
  	}
  }
}

 

import React from 'react';
import ReactDOM from 'react-dom';
import { Greeting } from './Greeting';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>
          Hullo and, "Welcome to The Newzz," "On Line!"
        </h1>
        <Greeting name="Alison" signedIn = {true}/>
        <article>
          Latest:  where is my phone?
        </article>
      </div>
    );
  }
}

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

 

https://www.codecademy.com/courses/react-101/lessons/this-props/exercises/render-ui-based-props