React: 컨텍스트 소비자의 자식을 복제하면 혼란스러운 경고 및 오류가 발생합니다.

문제는 cloneElement (컨텍스트에 대한 특별한 논리가 없음)가 아니라 props.children (이 경우 함수)를 Children.map() 전달한다는 것입니다. (기능을 기대하지 않음). Children.map 는 일반 React 노드에서만 작동합니다.

아마도 Children.map 는 React 노드가 아닌 것을 발견하면 경고를 표시 할 수 있습니다.

두 경우 모두 React가 설계되지 않은 작업을 수행하려는 것처럼 들립니다. 왜 이것이 필요합니까?

감사!

부모가 평가에 대한 컨텍스트를 제공 할 준비가 될 때까지 몇 가지 자식 속성에 대한 평가를 연기합니다. 예를 들면 :

<Parent ><Child prefix-prop="string expression"></Parent>
(표현 언어는 자바 스크립트가 아니고 원격으로 평가됩니다. 저는 Child를 제어하지 않으며 자식이 얼마든지있을 수 있습니다).

아이는 내부적으로 다음과 같이됩니다.

<Child prop={evaluate("string expression")} />

이를 위해 부모는 자식을 방문하여 표현식이 포함 된 "prefix-prop"속성을 표현식 값이 포함 된 "prop"속성으로 변환합니다. 복제는 구성 요소 속성을 변경하는 유일한 방법입니다. 물론 컨텍스트 소비자는 복제되어서는 안되며 변경할 속성이 없습니다.

나는 자식으로서의 함수 또는 렌더링 함수 또는 이와 유사한 것을 사용해야한다는 것을 알고 있지만 (평가를 지연시키기 위해) 프로토 타이핑 라이브러리와 사용자 (HTML 및 JSP에서 왔으며 종종 HTML 및 표현 언어 이상의 초보자)를 설계하고 있습니다. 아마도이 표기법을 이해하지 못할 것입니다.

<Parent>{ context=> <Child prop={context.evaluate(x)} />}</Parent>

(게다가 함수 바로 앞의 공백을 잊어 버리면 # 12689로 혼동됩니다.)

그리고 그들은이 형식을 빨리 이해하지 못할 것입니다 :
<Parent display={ context=> <Child prop={context.evaluate(x)} />} />

컨텍스트 소비자도 자식 기능을 사용하므로 동일한 문제가 있습니다.

이것은 매우 초기 작업이므로 여전히 옵션을 고려하고 있지만 어떻게 든 첫 번째 인용문에서와 같이 깨끗한 부모-자식 표기법에 도달하고 싶습니다. 아마도 나는 "깨끗한"표기법을 기능적인 표기법으로 변환하는 바벨 플러그인을 작성해야 할 것입니다.

그러나 어쩌면 내가 뭔가를 놓치고 있기 때문에 어떤 의견이든 감사하겠습니다. 내 사용자가 JSP를 떠나 React를 채택하기를 정말로 원하지만 표기법이 너무 암호화되어 있으면 이런 일이 발생하지 않습니다.

내가 가지고 노는 또 다른 아이디어는 기능적 부모, 아마도 Component (일종의 HOC)를 반환하는 것입니다.

({context})=>
context.parent("context expression",
     context2=><Child prop={context2.evaluate("sub-expression")} context={context2} />)

Child는 다시 context.parent () 호출을 포함 할 수 있습니다.

물론 parent ()는 반환하는 구성 요소의 render ()에서 컨텍스트 Consumer를 사용할 수 있으므로 컨텍스트 소품을 삭제할 수 있습니다.

()=>
parent("context expression",
     context2=><Child prop={context2.evaluate("sub-expression")} />)

_ 여기서 문제는 component가되는 parent ()는 React 컨텍스트에 액세스 할 수 있지만, Evaluation ()은 Component_를 반환하지 않는 한 React 컨텍스트에 액세스 할 수 없다는 것입니다.

실제로 속성을 설정하려고 할 때는 불가능합니다.

따라서 외부 컴포넌트에서 React 컨텍스트에 액세스하는 것이 이상적이라고 생각합니다. 같은 것

React.getContext(Consumer, data=> ...)

내가 옳다는 것을 기억한다면, 이것으로 어려움을 겪을 때 테스트 프레임 워크를 사용하여 수동으로 Consumer.render ()를 호출하려고 시도했지만 의미있는 것은 얻지 못했습니다.

추신 : 위의 첫 번째 표기법은 암호처럼 보일 수 있지만 실제로는 현재 JSP 형식에 매우 익숙하므로 사용자에게 판매 할 수 있다고 생각합니다. :)

<context:parent ctx="context-expression">
   HTML...<context:evaluate expr="sub-expression" />...HTML
</context:parent>

이것이 자주 나오는 것처럼 보이지 않기 때문에 닫습니다.