html을 반응과 함께 포함하기 위해 jsx의 3진 연산자

html을 반응과 함께 포함하기 위해 jsx의 3진 연산자

리액트를 사용하고 있는데 이 에러 메시지를 표시하려고 합니다.this.state.message === 'failed'그런데 왜 3진법이 안 되는지 모르겠어요.내가 여기서 뭘 잘못하고 있는 거지?

render() {
    ...
    <div className="row">
        return (this.state.message === 'failed') ? ( =>{" "}
        {
            <div className="alert alert-danger" role="alert">
                Something went wrong
            </div>
        }
        )() : false; }
    </div>
}

지금 당장은 그냥 표시만 하고 있어요.return (this.state.message === 'failed') ? ( =>html로

저는 현재 반응으로 삼항식을 다음과 같이 포맷하는 것을 좋아합니다.

render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === 'failed')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}

IIFE는 렌더문 내에서만 사용할 수 있을 뿐만 아니라 3진 표현식에서도 사용할 수 있습니다.표준 사용if .. else스테이트먼트는 유효하지만render함수의 반환문은 식만 포함할 수 있으므로 다른 곳에서 수행해야 합니다.

ternary 구문은 다음과 같습니다.condition ? if : else안전을 위해 항상 3진문 전체를 괄호 안에 넣을 수 있습니다.JSX 요소도 괄호로 둘러싸여 있습니다.화살표 함수의 굵은 화살표는 항상 두 개의 괄호 앞에 있습니다(인수의 경우). 단, 여기서는 어떤 함수도 필요하지 않습니다.이 모든 것을 고려하면 코드에는 몇 가지 구문 오류가 있습니다.유효한 솔루션은 다음과 같습니다.

render() {
  return (this.state.message === 'failed' ? (
   <div className="alert alert-danger" role="alert">
     Something went wrong
   </div>
  ) : null);
}

편집: 다른 마크업 내에 있는 경우 렌더링을 다시 호출할 필요가 없습니다.보간할 때는 그냥 곱슬곱슬한 괄호를 사용하면 됩니다.

render() {
  return (
    <div className="row">
      {this.state.message === 'failed' ? (
       <div className="alert alert-danger" role="alert">
         Something went wrong
       </div>
      ) : null}
    </div>
  );
}

@Nathan에 의해 인정된 답변과 다른 유사한 답변은 정확합니다.하지만 주목할 필요가 있는 것은?그리고 그 결과:각각 단일 요소이거나 단일 요소로 감싸야 합니다(또는 결과가 다음과 같을 수 있음).null | undefined(둘 중 하나가 단일 요소로 인정됩니다).다음 예에서는 에 대한 결과를 보여 줍니다.?효과는 있지만 결과는 아니다:실패한다...

return (
  {this.state.message === 'failed' ? (
      <div>
        <row>three elements wrapped</row>
        <row>inside</row>
        <row>another element work.</row>
      </div>
    ) : (
      <row>html like</row>
      <row>haiku</row>
      <row>must follow rules of structure.</row>
    )
  }
)

다음을 시도해 보십시오.

render () {
    return (
        <div className="row">
            { (this.state.message === 'failed') ?
                 <div className="alert alert-danger" role="alert">
                     Something went wrong
                 </div> :
                 <span> Everything in the world is fine </span> }
        </div>
    );
}

위의 답변에 따라 3차 표현도 직접 반환할 수 있습니다.return()당신의 안에서render()이것처럼.

return condition? this.function1(): this.function2();

function1() 및 function2() 내부에서는 뷰를 반환할 수 있습니다.

3진수 내부의 변수를 사용하려면 다시 대괄호를 사용하십시오.

render() {
  return(
    <div className='searchbox'>
     {this.state.var ? <div className='warning'>{this.state.var}</div> : ''}
    </div>
  )
}

3진법은 fragment 또는 div로 감싸야 합니다.따라서 감싸지 않으면 컴파일 오류가 발생합니다.

return (
        <Fragment>
            {fetching ? <Loading></Loading> : <p>Fetched</p>}
        </Fragment>
);

언급URL : https://stackoverflow.com/questions/38084658/ternary-operator-in-jsx-to-include-html-with-react