조건부로 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'}}
조건이 참인 경우 스타일 속성을 추가하려고한다고 가정 해 보겠습니다.
{...this.props.isTrue && {style : {color: 'red'}}}
es6을 사용하면 간단히 다음과 같이 쓸 수 있습니다.
// 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에서 컴포넌트를 조건부로 렌더링하는 데 도움이되는 "Ternary operator"를 사용하는 것이 좋습니다.
예는 구성 요소 및 해당 스타일 속성을 조건부로 렌더링하는 방법도 보여줍니다.
다음은 간단한 예입니다.
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 심도 를 고려하면 이런 식으로 문제를 해결할 수 있습니다
if (isRequired) {
return (
<MyOwnInput name="test" required='required' />
);
}
return (
<MyOwnInput name="test" />
);
참고 URL : https://stackoverflow.com/questions/31163693/how-to-conditionally-add-attributes-to-react-components
'Programing' 카테고리의 다른 글
ASP.NET MVC에서 404를 올바르게 처리하려면 어떻게해야합니까? (0) | 2020.02.19 |
---|---|
IIS Express에서 외부 요청을 활성화하는 방법은 무엇입니까? (0) | 2020.02.18 |
Twitter Bootstrap 버튼을 올바르게 정렬하려면 어떻게해야합니까? (0) | 2020.02.18 |
EditText에서 언더 바를 숨기는 방법 (0) | 2020.02.18 |
node_modules에 로컬로 설치된 패키지를 사용하는 방법은 무엇입니까? (0) | 2020.02.18 |