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

특정 조건이 충족되는 경우에만 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'}}}

ECMAScript 6을 사용하는 경우 간단히 다음과 같이 작성할 수 있습니다.

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />

이것은 Ajax 호출 후 상태가 변경되고 상위 구성 요소가 다시 렌더링되므로 작동합니다.

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>
    );
}

React에서 구성 요소뿐만 아니라 props, className, id 등과 같은 속성도 조건부로 렌더링 할 수 있습니다.

React에서는 구성 요소를 조건부로 렌더링하는 데 도움이되는 삼항 연산자 를 사용하는 것이 좋습니다 .

예제는 또한 구성 요소 및 해당 스타일 속성을 조건부로 렌더링하는 방법을 보여줍니다.

다음은 간단한 예입니다.

class App extends React.Component {
  state = {
    isTrue: true
  };

  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <button style={{ color: this.state.isTrue ? "red" : "blue" }}>
            I am rendered if TRUE
          </button>
        ) : (
          <button>I am rendered if FALSE</button>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

포스트 JSX In Depth를 고려하면 다음과 같이 문제를 해결할 수 있습니다.

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