React가 만든 트리를 가로 지르는 방법이 있습니까?

Question

HTML 페이지의 비주얼 편집기를 만들어야합니다. ReactJS가 좋은 선택 인 것 같습니다. 현재 나는 다음과 같은 문제에 직면 : 위의 구조 내에서 데이터를 저장

var Model = { 
    title: 'Hello', 
    description: 'Pellentesque eleifend urna ac purus tempus...', 
    date: new Date().toString() 
}; 

그리고 내장 된 구성 요소 : 그것이 작동하는 특정 경우

var App = React.createClass({ 
    getInitialState: function() { 
     return { 
      value: Model 
     } 
    }, 
    handleMouseEnter: function (event) { 
     $(event.target).css('outline', '1px solid red').attr('contenteditable', true); 
    }, 
    handleMouseLeave: function (event) { 
     var t = $(event.target), v = this.state.value; 
     t.css('outline', 'none').attr('contenteditable', false); 
     v[t.attr('property')] = t.text(); 
     this.setState({value: v}); 
    }, 
    render: function() { 
     var v = this.state.value; 
     return (
      <div> 
       <pre style={{whiteSpace: 'normal'}}>{JSON.stringify(this.state)}</pre> 
       <h1 onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="title">{v.title}</h1> 
       <p onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="description">{v.description}</p> 
       <p onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="date">{v.date}</p> 
      </div> 
     ); 
    } 
}); 

React.renderComponent(<App />, document.getElementById('app')); 

내가 내 데이터를 모델링. 하지만 onMouseEnter 및 onMouseLeave 속성을 없애고 property 필드 만 남기를 원합니다. 좋아요 :

<pre style={{whiteSpace: 'normal'}}>{JSON.stringify(this.state)}</pre> 
<h1 property="title">{v.title}</h1> 
<p property="description">{v.description}</p> 
<p property="date">{v.date}</p> 

믹스 인을 만들려고 생각했습니다. 그런 다음 componentDidMount 이벤트 내에서 property 속성을 가진 모든 요소에 핸들러를 연결하십시오. 그러나 나는 이것을 달성 할 수있는 방법을 찾지 못했습니다.

내 질문 : React가 만든 트리를 트래버스하는 방법이 있습니까? 나는 개발자 도구 (Chrome 확장 프로그램)을 사용할 수 있음을 확인했습니다.

비슷한 질문 : React.js component creating parent child relations and iterating

Answer 1

그래서 당신이 원하는 : 나는 또 다른 Component을 사용

<h1 onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="title">{v.title}</h1> 

<h1 property="title">{v.title}</h1> 

로, 그의 특정 유형의 렌더링을 담당 구성 요소 (예 : redux-form).

당신은 같은 것입니다 수행 할 작업을 달성하는 가장 간단한 방법 :

class MyField extends Component { 
    constructor(props) { 
    super(props); 
    this.handleMouseEnter = this.handleMouseEnter.bind(this); 
    } 
    handleMouseEnter() { ... } 
    render() { 
    const { property, children } = this.props; 
    if (property === 'title') { 
     return (
     <h1 onMouseEnter...>{children}</h1> 
    ); 
    } 
    } 
} 

그런 다음 당신은 다른 구성 요소를 다음과 같이 호출합니다 :

<MyField property="title">Stackoverflow</MyField> 

보다 전문적인, 하지만 더 어려운 접근법은 Field의 redux 양식 구현이 될 것이며, 심지어 React.createElement을 사용하여 HTML을 생성합니다 (위의 예에서 if-else로 수행).

외부 데이터에 액세스해야하는 경우 속성을 통해 함수를 전달하거나 MyField 구성 요소를 redux에 연결합니다 (redux-form도이 작업을 수행함).

MyField 구성 요소에 적용 할 특정 일회용 스타일도 소품을 통해 전달합니다.