2016-10-07 3 views
0

thishigherscalajs-react 라이브러리를 사용하여 Scala.js의 반응 성분을 사용하려고합니다. 여기 scalajs-react에서 higher order 반응성 성분을 사용합니다

은 JS에서이 구성 요소를 사용하는 방법에 대한 예는 다음과 같습니다 ({value}) => <li>{value}</li> desugars (props) => { var value = props.value; return <li>{value}</li> }<li>{value}</li> JSX이 React.createElement("li", null, value);에 desugars

import React, {Component} from 'react'; 
import {render} from 'react-dom'; 
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc'; 

const SortableItem = SortableElement(({value}) => <li>{value}</li>); 

const SortableList = SortableContainer(({items}) => { 
    return (
     <ul> 
      {items.map((value, index) => 
       <SortableItem key={`item-${index}`} index={index} value={value} /> 
      )} 
     </ul> 
    ); 
}); 

class SortableComponent extends Component { 
    state = { 
     items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'] 
    } 
    onSortEnd = ({oldIndex, newIndex}) => { 
     this.setState({ 
      items: arrayMove(this.state.items, oldIndex, newIndex) 
     }); 
    }; 
    render() { 
     return (
      <SortableList items={this.state.items} onSortEnd={this.onSortEnd} /> 
     ) 
    } 
} 

render(<SortableComponent/>, document.getElementById('root')); 

표현을하지만, 문제는이 표현을 번역하는 방법을 몰라 (React.createElement("li", null, value);)를 Scala.JS에 추가하십시오.

나는 React.createElement("li", null, value)의 등가를 얻을 수 있도록 Scala.JS에 작성해야 할 사항은 무엇 (({value}) => <li>{value}</li>은 포장 구성 요소로 here를 끝)?

요약 : 즉

JS에서 나는 var element=React.createElement("li", null, value) 작성하고있는 경우, 결과 객체가 element를 호출 한 후 무엇을 무엇을 동일한 element 개체를 평가합니다 Scala.JS 식 (val element = ???)입니다 ?

관련 질문은 here입니다.

enter image description here

: 브라우저 item2 React.createElement("li", null, "bla42") 및 검사에 의해 확인 된

답변

0
object Test 
{ 
    def createItem(itemText: String): ReactTagOf[LI] = <.li(_react_fragReactNode(itemText)(reactNodeInhabitableS)) 
} 

object ScalaJSExample extends js.JSApp { 
    def main(): Unit = { 

    val item = Test.createItem("bla42") 
    val item2: ReactElement = item 

} 

item2

React.createElement("li", null, "bla42")

와 동일

관련 문제