React 구성 요소의 조건에 따라 속성을 동적으로 추가하는 방법은 무엇입니까?

Question

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

사후 렌더링된 Ajax 호출의 조건을 기반으로 양식 요소에 필수 및 readOnly 속성을 추가해야 하지만 readOnly="false"< /code> 속성 생략과 완전히 다릅니다.

아래 예는 제가 원하는 것을 보여주어야 하지만 작동하지 않습니다.

<인용문>

(분석 오류: 예상치 못한 식별자)

function MyInput({isRequired}) {
  return <input classname="foo" {isRequired ? "required" : ""} />
}

Answer 1

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

원하는 대로 개체 만들기:

으아악

렌더링을 위해 스프레드를 사용하고, 다른 소품을 전달하도록 선택할 수도 있습니다.

으아악

Answer 2

분명히 일부 속성의 경우 React에 전달된 값이 실제 값이 아닌 경우 React는 지능적으로 속성을 생략합니다. 예:

으아악

다음을 받게 됩니다:

으아악

업데이트: 이런 일이 어떻게, 왜 발생하는지 궁금한 사람이 있다면 ReactDOM 소스 코드, 특히 DOMProperty.js 파일의 30행과 167에서 자세한 내용을 확인할 수 있습니다.