ReactJs - "If" 구성 요소 생성 중...좋은 생각?
리액트 문서에서 JSX 코드에서 "만약" 타입의 문을 사용할 수 없다면 JSX가 javascript로 렌더링하는 방법 때문에 예상대로 되지 않는다고 읽은 적이 있습니다.
하지만 "if" 컴포넌트를 구현하는 것이 나쁜 생각인 이유가 있나요?초기 테스트부터 잘 되는 것 같고, 왜 자주 하지 않는 것일까요?
저의 의도는 가능한 한 적은 javascript로 리액션 개발을 마크업 베이스로 하는 것입니다.이 접근방식은 데이터 중심 접근방식에 가깝다고 생각합니다.
JS 바이올린에서 확인하실 수 있습니다.
<script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/JSXTransformer.js"></script>
<script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/react-with-addons.js"></script>
<script type="text/jsx">
/** @jsx React.DOM */
var If = React.createClass({
displayName: 'If',
render: function()
{
if (this.props.condition)
return <span>{this.props.children}</span>
return null;
}
});
var Main = React.createClass({
render: function() {
return (
<div>
<If condition={false}>
<div>Never showing false item</div>
</If>
<If condition={true}>
<div>Showing true item</div>
</If>
</div>
);
}
});
React.renderComponent(<Main/>, document.body);
</script>위의 작업을 실행하면 다음과 같은 결과가 됩니다.
참 아이템 표시
react Docs의 "If-Else in JSX" 섹션을 확인합니다.
JSX에서는 문을 중괄호 안에 넣을 수 없습니다.식만 넣을 수 있습니다.JavaScript에서 표현식과 문장의 차이를 모르는 경우 이 문서를 참조하십시오.이 제한은 JSX가 함수 호출을 해제하고 JavaScript에서 함수에 대한 인수로서 if 문을 사용할 수 없기 때문입니다.단, 부울 연산자를 사용할 수 있습니다.&&,|| ★★★★★★★★★★★★★★★★★」? : 작업을 수행합니다와 같은 작업을 수행합니다.이들은 JSX가 생성하는 컨스트럭터 호출에 들어갈 수 있는 식이며, if 문에서 사용되는 것과 같은 단락 평가입니다.
<div>
{(true
? <div>Showing true item</div>
: <div>Never showing false item</div>
)}
</div>
<p>My name is {this.name || "default name"}</p>
는 【리액트】를 취급합니다.null ★★★★★★★★★★★★★★★★★」false실제 DOM에 렌더링되지 않는 "빈 컴포넌트"로 표시됩니다(현재는 백그라운드에서 동일한 noscript 기술을 사용합니다).이것은 "else" 분기를 원하지 않을 때 유용합니다.자세한 내용은 JSX의 False를 참조하십시오.
<div>
{shouldIncludeChild ? <ChildComponent/> : false}
</div>
문의하신 If 컴포넌트에 대해서입니다만, 문제가 되는 것은, 조건이 false가 되어도 현재의 형태로 아이를 평가하는 것입니다.If의 본문이 조건이 true인 경우에만 의미가 있는 경우 오류가 발생할 수 있습니다.
<If condition={person !== null}>
//This code throws an exception if this.person is null
<div>{person.name}</div>
</If>
이 문제를 해결하려면 if 컴포넌트가 하위 컴포넌트 목록이 아닌 함수로 본문을 수신하지만 보다 상세하게 설명합니다.
<If condition={person !== null} body={function(){
return <div>{person.name}</div>
}/>
마지막으로 If 컴포넌트는 스테이트리스이므로 새로운 컴포넌트 클래스 대신 플레인 함수를 사용하는 것을 검토해 주십시오.이는 React의 조정 알고리즘에 대해 "If"가 투과적이 되기 때문입니다.컴포넌트를 If 컴포넌트<div> a. a. a.<If><div>호환되지 않는 것으로 간주되며 React는 새 컴포넌트를 이전 컴포넌트와 병합하지 않고 완전한 재드로우를 수행합니다.
// This custom if function is for purely illustrative purposes
// However, this idea of using callbacks to represent block of code
// is useful for defining your own control flow operators in other circumstances.
function myCustomIf(condition, onTrue, onFalse){
onTrue = onTrue || function(){ return null }
onFalse = onFalse || function(){ return null }
if(condition){
return onTrue();
}else{
return onFalse();
}
}
<div>
{myCustomIf(person !== null, function(){
return <div>{person.name}</div>
})}
</div>
일반 JS보다 더 필요한 것은 없습니다.
안전하고 읽기 쉽다(단, 상세)
maybeRenderPerson: function() {
var personName = ...;
if ( personName ) {
return <div className="person">{personName}</div>;
}
}
render: function() {
return (
<div className="component">
{this.maybeRenderPerson()}
</div>
);
}
다소 장황하지만 논리를 보다 작고 집중적인 블록으로 쉽게 분할할 수 있습니다.컴포넌트가 복잡해지기 시작하면, 이것이 가장 읽기 쉬운 것입니다.
간결하고 읽기 쉬운 (단, 위험)
render: function() {
var personName = ...; // present or absent name, but never ""
return (
<div className="component">
{personName && (
<div className="person">{personName}</div>
)}
</div>
);
}
가 "이러다"와 같은 일 수 할 수 .0 ,"" ★★★★★★★★★★★★★★★★★」false를 0 히히으으 0으로 해야 합니다.
render: function() {
var counter= ...; // number, can be 0
return (
<div className="component">
{(typeof counter !== 'undefined') && (
<div className="counter">{counter}</div>
)}
</div>
);
}
컴포넌트가 복잡해진 경우 여러 개의 작은 컴포넌트로 분할하여 코드 형식의 규칙을 사용하면 판독성을 유지할 수 있습니다.
render: function() {
var person= ...;
var counter= ...;
return (
<div className="component">
{person && (
<Person person={person}/>
)}
{(typeof counter !== 'undefined') && (
<Counter value={counter}/>
)}
</div>
);
}
최신 구문(그러나 너무 이르다)
do기능 스테이트리스 컴포넌트가 있는 표기법은 가독성을 잃지 않고 표현에 도움이 됩니다. 큰 수 .do★★★★★★★★★★★★★★★★★★:
const Users = ({users}) => (
<div>
{users.map(user =>
<User key={user.id} user={user}/>
)}
</div>
)
const UserList = ({users}) => do {
if (!users) <div>Loading</div>
else if (!users.length) <div>Empty</div>
else <Users users={users}/>
}
JSX 내부에서 모듈 패턴을 사용하는 것과 비슷하기 때문에 유연성은 높지만 보일러 플레이트는 훨씬 적습니다.
이를 사용하려면 ES7 Stage 0 컴파일 툴이 필요하며, 즐겨찾는 IDE에서 아직 지원되지 않을 수 있습니다.
이렇게 인라인 조건을 할 수 있습니다.
{true && (
<div>render item</div>
)}
{false && (
<div>don't render item</div>
)}
또는 var를 사용하여
var something;
if (true) {
something = <div>render item</div>
}
{something}
Babel의 도움을 받아 올바른 콘텍스트로 자가 실행 기능을 수행할 수 있습니다!변수를 할당할 필요가 없고 원하는 만큼 복잡할 수 있기 때문에 이 방법을 선호합니다(유지보수를 위해 필요하지 않을 수도 있지만).
render() {
return (
<div>
<div>Hello!</div>
{() => {
if (this.props.isLoggedIn) {
return <Dashboard />
} else {
return <SignIn />
}
}()}
<div>Another Tag</div>
</div>
);
}
ES7 험7ES7do을 사용법 바벨을 유효하게 .es7.doExpressions츠키다
render() {
var condition = false;
return (
<div>
{do {
if (condition) {
<span>Truthy!</span>;
} else {
<span>Not truthy.</span>;
}
}}
</div>
);
}
http://wiki.ecmascript.org/doku.php?id=strawman:do_expressions 를 참조해 주세요.
당신의 주된 질문은 "If 컴포넌트를 구현할 수 있습니까?"가 아니라 "If 컴포넌트를 구현하는 것이 나쁜 생각인 이유가 있습니까?"입니다.
이것이 나쁜 생각인 주된 이유는 가 컴포넌트 렌더 사이클을 기존 컴포넌트 내의 소량의 코드에 추가하기 때문입니다.추가 구성 요소 래퍼는 React가 하위 항목에 대해 전체 추가 렌더 주기를 실행해야 함을 의미합니다.If 컴포넌트가 한 곳에서만 사용되고 있다면 큰 문제가 되지 않지만, 앱에 컴포넌트가 흩어져 있다면 UI가 그만큼 느려진 것일 뿐입니다.
방법과 유사:<div>Hi</div>보다 효율적입니다.<div><div>Hi</div></div>.
ES7do클로징은 다음과 같은 경우에 적합합니다.
예를 들면,webpack- ES7 기능을 추가할 수 있습니다.
첫 번째 설치stage-0기능:
npm install babel-preset-stage-0 -save-dev;
그런 다음 웹 팩 로더 설정에서 스테이지 0 바벨 사전 설정을 추가합니다.
loaders : [
//...
{
test : /\.js$/,
loader : "babel-loader",
exclude : /node_modules/,
query : {
presets : ["react", "stage-0", "es2015"]
}
}
]
컴포넌트 렌더 함수는 다음과 같습니다.
import React , { Component } from "react";
class ComponentWithIfs extends Component {
render() {
return (
<div className="my-element">
{
do {
if ( this.state.something ) {
<div>First Case</div>
} else {
<div>2nd Case</div>
}
}
}
</div>
);
}
}
경우에 따라 다르다고 생각합니다.그냥 내가 왜 여기 왔는지에 대해 똑같은 질문을 했어.렌더링할 컴포넌트가 크다면 표준 조건부 렌더링 방식이 아닌 IF 컴포넌트를 갖추는 것이 유용할 것 같습니다.
...
<IF condition={screenIs("xs")}>
<div> Then statement</div>
<div>other Statement</div>
<div>and so on</div>
</IF>
...
보다 확실히 가독성이 높다
...
{
screenIs("xs") && (
<Fragment>
<div> Then statement</div>
<div>other Statement</div>
<div>and so on</div>
</Fragment>
)
}
...
삼진법도 마찬가지고
...
<IF.Ternary condition={screenIs("xs")}>
<Fragment>
<div> Then statement</div>
<div>other then Statement</div>
<div>and so on</div>
</Fragment>
<Fragment>
<div> Else statement</div>
<div>other Else Statement</div>
<div>and so on</div>
</Fragment>
</IF.Ternary>
...
보다 읽기 쉽다
...
{
screenIs("xs")
? (
<Fragment>
<div> Then statement</div>
<div>other Then Statement</div>
<div>and so on</div>
</Fragment>
)
: (
<Fragment>
<div> Else statement</div>
<div>other Else Statement</div>
<div>and so on</div>
</Fragment>
)
}
...
어쨌든, 보다 읽기 쉽게 하기 위해서, 어떤 방법으로든 조건부 렌더링 부분을 정의하고, 그것을 메인 렌더링으로 호출할 수 있습니다.
{
...
renderParts = () => {
return screenIs('xs') ? <div>XS</div> : <div>Not XS</div>
}
...
render() {
return (
...
{this.renderParts()}
...
)
}
}
관심 있는 사람이 있다면 다음 목적을 위해 리액트모듈을 출시했습니다.
var Node = require('react-if-comp');
...
React.createClass({
render: function() {
return (
<div>
<Node if={false} else={<div>Never showing false item</div>} />
<Node if={true} then={<div>Showing true item</div>} />
</div>
);
}
});
"템플릿"을 사용한 조건부 렌더링은 모두 피하고 싶습니다.React 및 JSX에서는 모든 JavaScript 기능을 사용하여 조건부 렌더링을 수행할 수 있습니다.
- if-internal의
- 삼진법
- 논리 & &
- 스위치 케이스
- enums(언넘)
이것이 JSX를 통한 렌더링을 강력하게 하는 이유입니다.그렇지 않으면 Angular 1/2와 같이 라이브러리/프레임워크 고유의 템플릿 언어를 다시 발명할 수 있습니다.
유지보수가 가능한 코드를 위해 다음과 같은 불필요한 추상화를 건너뜁니다.If제어 로직을 추가하고, 그 전에 조기 종료합니다.return에 기재되어 있는 스테이트먼트render방법, 예:
import React from 'react-native';
let {
Text
} = React;
let Main = React.createClass({
setInitialState() {
return { isShown: false }
},
render() {
let content;
if (this.state.isShown) {
content = 'Showing true item'
} else {
return false;
}
return (
<Text>{content}</Text>
);
}
});
건조함을 유지시켜 줍니다.영속적인 보호.
render-if는 조건이 충족되면 요소를 렌더링하는 경량 함수입니다.
인라인 표현으로서
class MyComponent extends Component {
render() {
return (
{renderIf(1 + 2 === 3)(
<span>The universe is working</span>
)}
);
}
}
명명된 함수로
class MyComponent extends Component {
render() {
const ifTheUniverseIsWorking = renderIf(1 + 2 === 3);
return (
{ifTheUniverseIsWorking(
<span>The universe is still wroking</span>
)}
)
}
}
합성함수로서
const ifEven = number => renderIf(number % 2 === 0);
const ifOdd = number => renderIf(number % 2 !== 0);
class MyComponent extends Component {
render() {
return (
{ifEven(this.props.count)(
<span>{this.props.count} is even</span>
)}
{ifOdd(this.props.count)(
<span>{this.props.count} is odd</span>
)}
);
}
}
다른 문장이 필요 없는 경우 논리적인 표현으로 느긋한 평가를 활용하는 것으로 충분합니다.
render() {
return(
<div>
{
condition &&
<span>Displayed if condition is true</span>
}
</div>
);
}
또는 ternay 연산자가 필요한 경우 다음을 수행합니다.
render() {
return(
<div>
{
condition ?
<span>Displayed if condition is true</span>
:
<span>Displayed if condition is false</span>
}
</div>
);
}
언급URL : https://stackoverflow.com/questions/25224793/reactjs-creating-an-if-component-a-good-idea
'programing' 카테고리의 다른 글
| Perl에서 단순 해시를 json으로 변환하는 방법 (0) | 2023.03.18 |
|---|---|
| spring @Valid Validation 기본 오류 메시지를 커스터마이즈하려면 어떻게 해야 하나요? (0) | 2023.03.18 |
| JSON을 XML로 변환하거나 XML을 JSON으로 변환하는 방법 (0) | 2023.03.18 |
| rspec 요청 사양에서 요청 헤더를 설정하려면 어떻게 해야 합니다. (0) | 2023.03.18 |
| 스프링 부트 - 다른 시스템(eureka, zuul, 리본, nginx 등)은 무엇에 사용됩니까? (0) | 2023.03.18 |