React 구성 요소 render가 있고 구성 요소 메서드 내부에 다음과 같은 것이 있습니다.
render() {
return (
<div>
<div>
// removed for brevity
</div>
{ switch(...) {} }
<div>
// removed for brevity
</div>
</div>
);
}
이제 요점은 두 개의 div요소가 있는데, 하나는 상단에 하나는 하단에 고정되어 있다는 것입니다. 중간에는 switch 문이 있고 내 상태의 값에 따라 다른 구성 요소를 렌더링하고 싶습니다. 그래서 기본적으로 두 div요소는 항상 고정되고 중간에 매번 다른 구성 요소를 렌더링하기를 원합니다 . 나는 이것을 사용하여 다단계 지불 절차를 구현하고 있습니다). 현재 코드 switch가 그렇듯이 예상치 못한 오류가 발생하므로 작동하지 않습니다 . 내가 원하는 것을 달성하는 방법에 대한 아이디어가 있습니까?
답변
이것도 시도 해보세요. 함수의 렌더링에서 스위치를 꺼내 원하는 매개 변수를 전달하기 만하면됩니다. 예를 들면 :
renderSwitch(param) {
switch(param) {
case 'foo':
return 'bar';
default:
return 'foo';
}
}
render() {
return (
<div>
<div>
// removed for brevity
</div>
{this.renderSwitch(param)}
<div>
// removed for brevity
</div>
</div>
);
}답변
다른 답변과 달리 렌더링 기능에서 “스위치”를 인라인하는 것을 선호합니다. 해당 위치에서 어떤 구성 요소를 렌더링 할 수 있는지 더 명확하게 알 수 있습니다. 일반 오래된 자바 스크립트 객체를 사용하여 스위치와 같은 표현식을 구현할 수 있습니다.
render () {
return (
<div>
<div>
{/* removed for brevity */}
</div>
{
{
'foo': <Foo />,
'bar': <Bar />
}[param]
}
<div>
{/* removed for brevity */}
</div>
</div>
)
}
답변
그 이유는 switch진술이statement 이지만 여기서 자바 스크립트는 표현식을 기대 합니다.
render메서드 에서 switch 문을 사용하는 것은 권장되지 않지만 자체 호출 함수를 사용하여이를 달성 할 수 있습니다.
render() {
// Don't forget to return a value in a switch statement
return (
<div>
{(() => {
switch(...) {}
})()}
</div>
);
}
답변
render () 메서드 내에서 이렇게했습니다.
render() {
const project = () => {
switch(this.projectName) {
case "one": return <ComponentA />;
case "two": return <ComponentB />;
case "three": return <ComponentC />;
case "four": return <ComponentD />;
default: return <h1>No project match</h1>
}
}
return (
<div>{ project() }</div>
)
}
render () 반환을 깨끗하게 유지하려고 했으므로 바로 위에 ‘const’함수에 논리를 넣었습니다. 이렇게하면 스위치 케이스를 깔끔하게 들여 쓸 수도 있습니다.
답변
조건 연산자를 사용하여 렌더 블록에서 일종의 스위치 를 표현하는 방법 :
{(someVar === 1 &&
<SomeContent/>)
|| (someVar === 2 &&
<SomeOtherContent />)
|| (this.props.someProp === "something" &&
<YetSomeOtherContent />)
|| (this.props.someProp === "foo" && this.props.someOtherProp === "bar" &&
<OtherContentAgain />)
||
<SomeDefaultContent />
}
조건이 부울을 엄격하게 반환하는지 확인해야합니다.
답변
lenkan의 답변은 훌륭한 솔루션입니다.
<div>
{{ beep: <div>Beep</div>,
boop: <div>Boop</div>
}[greeting]}
</div>
기본값이 필요하면 다음을 수행 할 수도 있습니다.
<div>
{{ beep: <div>Beep</div>,
boop: <div>Boop</div>
}[greeting] || <div>Hello world</div>}
</div>
또는 잘 읽히지 않으면 다음과 같이 할 수 있습니다.
<div>
{
rswitch(greeting, {
beep: <div>Beep</div>,
boop: <div>Boop</div>,
default: <div>Hello world</div>
})
}
</div>
와
function rswitch (param, cases) {
if (cases[param]) {
return cases[param]
} else {
return cases.default
}
}
답변
나는 너무 장황하거나 무슨 일이 일어나고 있는지 이해하기 위해 코드를 뛰어 넘도록 요구하기 때문에 현재 답변을 좋아하지 않습니다.
나는 <Switch/>. 이 컴포넌트의 역할은 소품을 가져 와서이 소품과 일치하는 자식 소품 만 렌더링하는 것입니다. 그래서 아래의 예에서 저는 test스위치에 value소품을 만들고 자식 의 소품 과 비교하여 일치하는 것들만 렌더링했습니다.
예:
const Switch = props => {
const { test, children } = props
// filter out only children with a matching prop
return children.find(child => {
return child.props.value === test
})
}
const Sample = props => {
const someTest = true
return (
<Switch test={someTest}>
<div value={false}>Will display if someTest is false</div>
<div value={true}>Will display if someTest is true</div>
</Switch>
)
}
ReactDOM.render(
<Sample/>,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>스위치를 원하는대로 간단하거나 복잡하게 만들 수 있습니다. 아이들과 그들의 가치 소품에 대해 더 강력한 검사를 수행하는 것을 잊지 마십시오.
