Thành phần React có thể thao tác với nút DOM hiện có không?

Question

Tôi muốn thêm một chút chức năng vào một số HTML được hiển thị trên máy chủ hiện có. Giả sử tôi có một biểu mẫu:

<form> 
    <input type="checkbox" /> Show details 

    <div class='details'> 
    <input type="text" name="first_name" /> 
    <input type="text" name="last_name" /> 
    </div> 
</form> 

HTML đã được tạo trên máy chủ. Tôi tự hỏi, liệu tôi có thể sử dụng thành phần React để nói, thêm/xóa lớp hide vào số .details div bất cứ khi nào hộp kiểm được chọn và bỏ chọn không?

Tôi không muốn React hiển thị lại biểu mẫu vì phần còn lại của trang đã được máy chủ xử lý.

Answer 1

Kiểm tra server-rendering React example. Bạn có thể thấy ở đó tập lệnh PHP nhận được kết quả trả về kết xuất từ ​​node.js và trả về cho khách hàng và sau đó thành phần React tương tự được gắn vào DOM để sửa đổi thêm.

Nếu bạn muốn có HTML được hiển thị ở phía máy chủ và sau đó được xử lý bằng Phản hồi, đó là cách tiếp cận tốt nhất. Nếu không, bạn sẽ cần phải viết các mẫu hai lần: trong React và máy chủ mẫu phía máy chủ của bạn.

Answer 2

Có giải pháp nhưng tôi không biết liệu có hiệu quả hay không: Bạn có thể sử dụng dangerouslySetInnerHTML để tạo trình bao bọc trên các phần tử DOM hiện có của mình.

Hãy xem xét ví dụ bạn muốn thêm một swapper trên hai div yếu tố đã có sẵn (https://jsfiddle.net/gdoumenc/a86g58qz/):

// a wrapper just rendering the previous DOM children 
var Wrapper = React.createClass({ 
    render: function() { 
     return <div dangerouslySetInnerHTML={{__html: this.props.html}}/>; 
    } 
}); 

// a simple swapper 
var Swapper = React.createClass({ 
    getInitialState: function() { 
     return {swap: false}; 
    }, 
    onClick: function() { 
     this.setState({swap: !this.state.swap}); 
    }, 
    replace: function(id) { 
     if (!(id in this)) { 
      var node = document.getElementById(id); 
      var elt = document.createElement(node.tagName); 
      elt.appendChild(node.childNodes[0]); 
      this[id] = elt.innerHTML; 
     } 
     return this[id]; 
    }, 
    render: function() { 

     // replace here the elements par wrapped ones 
     box1 = <Wrapper html={this.replace('box1')}/>; 
     box2 = <Wrapper html={this.replace('box2')}/>; 

     if (this.state.swap) { 
      content = [box1, box2]; 
     } else { 
      content = [box2, box1]; 
     }; 
     return <div> 
      {content}<button onClick={this.onClick}>Swap</button> 
     </div>; 
    } 
}); 

'