CSS 표시 방법: React JSX를 사용한 조건 내에는 없음

CSS 표시 방법: React JSX를 사용한 조건 내에는 없음

제가 렌더링하려고 하는 건div사용자가 링크를 클릭했을 때 같은 페이지에 표시됩니다.

내 HTML 페이지:

<div class="stores">
  <h1>Stores</h1>
  <ul class="stores">
    <li><a href="#" onClick={this.onClick} >Store A</a></li>
    <li>Store B</li>
    <li>Store C</li>
  </ul>
</div>

나의components/store.js.jsx:

var Store = React.createClass({
  getInitialState: function() {
    return { showStore: false };
  },
  onClick: function() {
      this.setState({ showStore: true });
  },
  render: function() {
  return(
    <div className="row account stores" style={{display: { this.state.showStore ? 'block' : 'none'} }}>
      <div>a lot more divs</div>
        </div>
    );
  }
});

하지만 나는 다음과 같은 것을.

구문 오류: 알 수 없음: 예기치 않은 토큰

이 행의 경우:

style={{display: { this.state.showStore ? 'block' : 'none'} }}

어떻게 하면 조건부로 스타일에 둥지를 틀 수 있을까요?

이는 3진 연산자가 잘못 사용되었기 때문입니다.다음 문서를 참조하십시오.https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

로 포장하면 안 됩니다.{}당신이 한 것처럼

다음을 시도해 보십시오.

style={{display: this.state.showStore ? 'block' : 'none' }}

CSS에서 클래스 이름과 스타일을 변경할 수도 있습니다.

// outside render
const NORMAL = "row account stores"
const HIDDEN = NORMAL + " hidden"

// In render
render: function() {
  return(
    <div className={this.state.showStore ? NORMAL : HIDDEN}>
      <div>a lot more divs</div>
        </div>
  );
}

일반적으로 렌더링 함수에서는 더블컬리 괄호 {{}를 사용하지 않는 것이 좋습니다.이는 렌더 실행 시마다 새로운 오브젝트를 작성하는 경우가 많기 때문입니다.예를 들어 다음과 같습니다.

{display: true ? 'block' : 'none' } === {display: true ? 'block' : 'none' } // false

// outside render
const BLOCK = { display: 'block' }
const NONE= { display: 'none' }

// in render
{this.state.showStore ? BLOCK : NONE}

조건부로 요소를 작성할 수도 있습니다.

   { 
     this.state.showStore 
     ? <div className="row account stores">
        <div>a lot more divs</div>
       </div> 
     : null 
   }

언급URL : https://stackoverflow.com/questions/37728951/how-to-css-displaynone-within-conditional-with-react-jsx