잡히지 않는 불변의 위반 : 객체가 HTML 양식의 반응 자식으로 유효하지 않습니다.

Question

키와 객체의 값을 기반으로 HTML 양식을 작성하는 함수를 작성했으며 양식을 render 메소드로 반환하려고합니다.

render() { 
    return (
     <div> 
     {this.createForm()} 
     </div> 
    ) 
} 

사람이 발생 될 수 있습니다 알고 있나요 :

여기

createForm() { 

    const obj = { 

    } 

    const object_fields = resourceFields.fields; 
    let form = document.createElement('form'); 

    _.forIn(object_fields, function(field_value, field_name) { 


     let div = document.createElement('div'); 
     div.setAttribute('className', 'form-control'); 

     let label = document.createElement('label'); 
     label.setAttribute('htmlFor', 'name'); 
     label.innerHTML = field_name; 

     let input = document.createElement('input'); 
     input.setAttribute('className', 'form-control'); 
     input.setAttribute('type', 'text'); 
     input.setAttribute('ref', field_name); 
     input.setAttribute('id', field_name); 
     input.setAttribute('value', field_value); 
     input.setAttribute('onChange', '{this.handleChange}'); 

     div.appendChild(label); 
     div.appendChild(input); 
     form.appendChild(div); 

    }) 

    console.log(form) //this prints out fine 

    return form 


    } 

내 render() 방법 :

여기

ReactJs 0.14 - Invariant Violation: Objects are not valid as a React child

내 createForm() 방법이다 : 그러나, 나는 오류가 계속 ? 내 양식이 콘솔에서 잘 인쇄됩니다 ... 미리 감사드립니다!

Answer 1

React로 작업 할 때 실제 DOM 노드를 조작하지 마십시오. render 함수로 UI를 빌드하면 JSX 마크 업은 일반 JavaScript (React.createElement 함수 호출)로 변환되며 이는 표현 인 DOM의을 만듭니다.

따라서 귀하의 경우 DOM 요소가 아닌 createForm에 JSX를 반환해야합니다.