ReactJS의 동적 속성

버튼 요소에 비활성화 된 속성을 동적으로 포함 / 생략하고 싶습니다. 동적 속성 값의 예를 많이 보았지만 속성 자체는 보지 못했습니다. 다음과 같은 렌더링 기능이 있습니다.

render: function() {
    var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
    return <button {maybeDisabled}>Clear cart</button>
}

"{"문자로 인해 구문 분석 오류가 발생합니다. AppStore.cartIsEmpty ()의 (boolean) 결과에 따라 disabled 속성을 어떻게 포함 / 생략 할 수 있습니까?

선택적 속성 ( disabled및 사용할 수있는 기타 포함)을 추가하는 가장 깨끗한 방법 은 현재 JSX 스프레드 속성 을 사용하는 것입니다 .

var Hello = React.createClass({
    render: function() {
        var opts = {};
        if (this.props.disabled) {
            opts['disabled'] = 'disabled';
        }
        return <button {...opts}>Hello {this.props.name}</button>;
    }
});

React.render((<div><Hello name="Disabled" disabled='true' />
    <Hello name="Enabled"  />
</div>)
, document.getElementById('container'));

스프레드 속성을 사용하면 자바 스크립트 개체 인스턴스를 사용하여 원하는 속성을 동적으로 추가 (또는 재정의) 할 수 있습니다. 위의 예에서 코드 는 속성이 구성 요소 인스턴스에 전달 될 때 disabled키 ( disabled이 경우 값 포함)를 만듭니다 .disabledHello

만 사용하려면 disabled하지만 이 대답은 잘 작동합니다.

disabled속성에 부울을 전달할 수 있습니다 .

render: function() {
    return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}

나는 React 16을 사용하고 있으며 이것은 나를 위해 작동합니다 ( bool테스트는 어디에 있습니까 ).

<fieldset {...(bool ? {disabled:true} : {})}>

기본적으로 테스트 ( bool)를 기반으로 속성이있는 객체를 반환하거나 빈 객체를 반환합니다.

또한 여러 속성을 추가하거나 생략해야하는 경우 다음을 수행 할 수 있습니다.

<fieldset {...(bool ? {disabled:true} : {})} {...(bool ? {something:'123'} : {})}>

좀 더 정교한 속성 관리를 위해 JSX 외부의 속성을 사용하거나 사용하지 않고 객체를 사전 제작하는 것이 좋습니다.

모든 속성에 대해 작동하는 동적 속성을 수행하는 더 깨끗한 방법은

function dynamicAttributes(attribute, value){
  var opts = {};
  if(typeof value !== 'undefined' && value !== null) {
    opts['"'+attribute+'"'] = value;
    return opts;
  }
  return false;
};

다음과 같이 반응 구성 요소를 호출하십시오.

<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />

팁 :

1. dynamicAttributes공통된 장소 / 유틸리티에서 기능을 가지고 모든 구성 요소에서 사용하도록 가져올 수 있습니다.

2. null동적 속성을 렌더링하지 않도록 값을 전달할 수 있습니다.

문서에서 이와 유사한 것을 찾을 수 있습니다.

https://facebook.github.io/react/docs/transferring-props.html

귀하의 경우에는 다음과 같을 수 있습니다.

function MyComponent(props) {
    let { disabled, ...attrs } = props;
    if (disabled) {
        // thus, it will has the disabled attribute only if it
        // is disabled
        attrs = {
            ...attrs,
            disabled: true
        }
    };

    return (
        <button {...attrs}>MyLabel</button>
    )
}

이 코드는 ES6를 사용하고 있지만 아이디어를 얻었습니다.

이 구성 요소에 다른 많은 속성을 전달할 수 있고 여전히 작동하기 때문에 이것은 멋지다.

내가 사용한 버전은 다음과 같습니다.

<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

간단하고 깨끗한 방법

<button {...disabled && {disabled: true}}>Clear cart</button>

비활성화는 이와 같은 소품에서 가져와야합니다.

<MyComponent disabled />

허용되는 솔루션보다 훨씬 더 깨끗한 솔루션은 AnilRedshift가 언급 한 솔루션입니다.

간단히 말해 HTML 속성에는 이름과 값이 있습니다. 간단히 말해서 "disabled", "multiple"등에 대해서만 이름을 사용할 수 있습니다. 그러나 longhand 버전은 여전히 ​​작동하며 React가 선호하는 방식으로 작동하도록 허용합니다.

disabled={disabled ? 'disabled' : undefined} 가장 읽기 쉬운 솔루션입니다.

먼저 간단히 확인할 수 있습니다.

<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>

참고 : ** disabled 값은 String이 아니며 Boolean 이어야합니다 .

이제 동적입니다. 간단히 쓸 수 있습니다.

<button type="button" disabled={disable}  
        onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>

보시다시피 비활성화 된 속성을 사용하고 있으며 중괄호로 지역 변수 / 상태 변수가 될 수 있습니다. 변수 disable는 true / false 값을 포함합니다.

이것은 작동 할 수 있으며, 비활성화 된 문제는 단순히 부울을 설정할 수 없다는 것입니다.

if(AppStore.cartIsEmpty()){
  return "<button disabled>Clear cart</button>"
}
else
{
  return "<button>Clear cart</button>"
}