ReactDOM.findDOMNode() return null with refs

问题

ReactDOM is not working with refs.

I want to sting html <b>abcd</b> append to body of modal, but it's not working.

when I check console.log() of modal and modalBody, it return null.

My code in under:

class Header extends Component {
      constructor(props) {
        super(props);
        this.state = {
            this.state.modalSendResult: false
        };
      }

      _open() {
        this.setState({
           modal: !this.state.modal
        });
        if (!this.state.modal) {
           this.appendNode();
        }
      }

      appendNode() {
        let modal = ReactDOM.findDOMNode(this.refs.modal)
            modalBody = ReactDOM.findDOMNode(this.refs.body);
        ReactDOM.render(
          <b>abcde</b>, modalBody
        );
      }

      render() {
        return (
          <Button onClick={this._open.bind(this)}
                  className="btn btn-primary btn-primary-1 mr-1">
               <i className="fa fa-paper-plane-o" aria-hidden="true"></i> Open
          </Button>
          <Modal ref="modal" isOpen={this.state.modal} toggle={this._open}
                            className={'modal-primary modal_customer'}>
               <ModalHeader toggle={this._open}>
                    Danh sách kết quả gửi
               </ModalHeader>
               <ModalBody className="modal-send" ref="body">
               </ModalBody>
          </Modal>
        );
      } 
 }

Please help me!

回答1:

Take a look at ReactDOM. You can avoid having to call findDOMNode by setting up your refs as specified here: Refs and the DOM.

I think in your case it would look something like

<Modal
  ref={(modal) => { this.modal = modal; }}
  isOpen={this.state.modal}
  toggle={this._open}
  className={'modal-primary modal_customer'}
>
  <ModalHeader toggle={this._open}>
    Danh sách kết quả gửi
  </ModalHeader>
  <ModalBody
    className="modal-send"
    ref={(body) => { this.body = body; }}
  />
</Modal>

Then you should be able to reference them with

this.modal
this.body

Alternatively, you could pass the content you want for your ModalBody component as a prop.

<ModalBody
  className="modal-send"
  content="abcde"
  ref={(body) => { this.body = body; }}
/>

And render in your ModalBody component:

render() {
  return (
    <b>{this.props.content}</b>
  );

来源：https://stackoverflow.com/questions/45652903/reactdom-finddomnode-return-null-with-refs

标签

reactjs

react-native

react-dom