React의 동적 속성JS

React의 동적 속성JS

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

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

이 경우 "{" 문자로 인해 구문 분석 오류가 발생합니다.AppStore.cartIsEmpty()의 (부울) 결과에 따라 비활성화된 속성을 포함하거나 생략하려면 어떻게 해야 합니까?

옵션 Atribute를 추가하는 가장 깨끗한 방법(다음 포함)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'));

확산 속성을 사용하면 Javascript 객체 인스턴스를 사용하여 원하는 속성을 동적으로 추가하거나 재정의할 수 있습니다.위의 예에서는 이 코드에 의해disabled(로) 키를 누르다disabled이 경우 값)은 다음과 같습니다.disabled속성이 에 전달됩니다.Hello컴포넌트 인스턴스

사용만 원하시면disabled그래도 이 대답은 잘 들어맞습니다.

리액트 16을 사용하고 있는데, 이것은 나에게 유효합니다(여기서).bool테스트인 경우:

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

기본적으로 테스트에 근거한다.bool) 조건부 속성을 가진 객체를 반환하거나 반환하지 않습니다.

또, 복수의 어트리뷰트를 추가 또는 생략할 필요가 있는 경우는, 다음과 같이 할 수 있습니다.

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

좀 더 자세한 속성 관리를 위해 JSX 외부에 속성을 포함(또는 포함하지 않음)하는 객체를 프리패브하는 것이 좋습니다.

부울을 에 전달할 수 있습니다.disabled기여하다.

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

function Test() {
  return (
    <div>
      <button disabled={false}>Clear cart</button>
      <button disabled={true}>Clear cart</button>
    </div>
  );
}

ReactDOM.render(<Test />, document.querySelector("#test-container"));
console.log(Array.from(document.querySelectorAll("button")));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="test-container"></div>

AnilRedshift가 언급한 솔루션보다 훨씬 깨끗한 솔루션을 소개합니다.

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

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

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

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

모든 Atribute에서 동작하는 다이내믹 Atribute를 보다 깔끔하게 실행할 수 있는 것입니다.

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모든 컴포넌트에서 사용하기 위해 공통 장소/공간에서 기능하고 그것을 Import한다.

2. 가치를 전달할 수 있습니다.null동적 속성을 렌더링하지 않음

심플하고 깔끔한 방법

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

장애인은 이런 소품에서 나와야 한다

<MyComponent disabled />

이와 유사한 내용은 설명서에서 확인할 수 있습니다.

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={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참/거짓

이 이 곳에 다른 경우disabled "예: "예: "예: "예: "예: "예: "예: "예: "예."data-attr할 수 ""속성 값을 제거하기 위해 확산되는 개체 값으로 지정합니다.할 수 있는 .

예를 들어 다음과 같습니다.

<div {...(trueOrFalse && { [`data-attr`]: "" })}></div>

또, Atribute의 이름도 dynamic하게 하고 싶은 경우.템플릿 문자열은 문자열 보간을 지원하므로 상태를 템플릿 문자열에 삽입하여 Atribute의 이름을 동적으로 만들 수 있습니다.

<div {...(trueOrFalse && { [`${state}`]: "" })}></div>

이것은 동작할 수 있습니다.disabled의 문제는 단순히 부울을 설정할 수 없다는 것입니다.

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

언급URL : https://stackoverflow.com/questions/29103096/dynamic-attribute-in-reactjs