조건부로 React 컴포넌트에 속성을 추가하려면 어떻게해야합니까? </div>

특정 조건이 충족되는 경우에만 React 구성 요소에 속성을 추가하는 방법이 있습니까?

렌더링 후 Ajax 호출을 기반으로 요소를 형성하기 위해 필수 및 readOnly 속성을 추가해야하지만 readOnly = “false”가 속성을 완전히 생략하는 것과 같지 않기 때문에이를 해결하는 방법을 볼 수 없습니다.

아래 예제는 내가 원하는 것을 설명해야하지만 작동하지 않습니다 (구문 오류 : 예기치 않은 식별자).

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

답변

분명히 특정 속성의 경우 React는 전달하는 값이 사실이 아닌 경우 속성을 생략 할 정도로 지능적입니다. 예를 들면 다음과 같습니다.

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

결과 :

<input type="text" required>

업데이트 : 누군가가 어떻게 / 왜 이런 일이 발생하는지 궁금하다면 ReactDOM의 소스 코드, 특히 DOMProperty.js 파일 의 30 및 167 행에서 세부 정보를 찾을 수 있습니다 .

답변

juandemarco의 답변 은 일반적으로 정확하지만 여기에 다른 옵션이 있습니다.

원하는 방식으로 객체를 만듭니다.

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition)
  inputProps.disabled = true;

스프레드를 사용하여 렌더링하고 선택적으로 다른 소품도 전달합니다.

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

답변

여기서 사용한 예이다 부트 스트랩 의 Button비아 반작용 부트 스트랩 (버전 0.32.4)는 :

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

상태에 따라, 하나 {bsStyle: 'success'}또는 {}반환됩니다. 스프레드 연산자는 반환 된 객체의 속성을 Button구성 요소에 스프레드합니다 . 잘못된 경우 반환 된 객체에 속성이 없으므로 구성 요소에 아무것도 전달되지 않습니다.

Andy Polhill의 의견을 기반으로 한 다른 방법 :

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

유일한 작은 차이점은 두 번째 예에서 내부 구성 요소 <Button/>의 props객체 bsStyle에 값이 키가 있다는 것 입니다 undefined.

답변

대안이 있습니다.

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

또는 인라인 버전

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

답변

내가하는 방법이 있습니다.

조건부로 :

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

나는 조건을 갖지 않는 경우에 더 읽기 쉬운 (내 의견으로는) 소품을 전달하는 규칙적인 방법을 사용하는 것을 선호합니다.

조건부없이 :

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

답변

구성 요소 ( {isVisible && <SomeComponent />}) 를 추가 / 제거하는 데 사용되는 것과 동일한 바로 가기를 사용할 수 있습니다 .

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

답변

조건이 true 인 경우 aria- * 또는 data- *를 사용하여 사용자 지정 속성을 추가하려고한다고 가정 해 보겠습니다.

{...this.props.isTrue && {'aria-name' : 'something here'}}

조건이 true 인 경우 스타일 속성을 추가하려고한다고 가정 해 보겠습니다.

{...this.props.isTrue && {style : {color: 'red'}}}