javascript - 如何动态更改 React Bootstrap 模态的内容？

Question

我试图在安装后更改模式的内容，但我无法找到要更改的正确节点。我已将 refs 附加到我感兴趣的节点，并尝试在 componentDidMount() 中更改它们。但是没有找到节点——显示为空。

var Modal = ReactBootstrap.Modal;


const MyModal = React.createClass({

  getInitialState() {
    return { showModal: false };
  },

  close() {
    this.setState({ showModal: false });
  },

  open() {
    this.setState({ showModal: true });
  },


  componentDidMount() {
    var theNode = ReactDOM.findDOMNode(this.refs.bigPic);
    var theOtherNode = ReactDOM.findDOMNode(this.refs.bigPicInfo);
    theNode.src = 'http://big-pic.png';
    theOtherNode.innerHTML = "<strong> Something here</strong>";
  },

  render() {
    return (
        <div>
        <Modal show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title></Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div><img ref="bigPic" src="" /></div>
          </Modal.Body>
          <Modal.Footer>
            <p ref="bigPicInfo"></p>
          </Modal.Footer>
        </Modal>
        </div>
    );
  }
});

ReactDOM.render(<MyModal/>, document.getElementById("my-modal"));

Answer 1

React 中的动态内容由组件状态驱动，就像您使用 this.state.showModal 动态显示或不显示模态一样。任何可能改变的东西都应该在 getInitialState 中有一个默认设置，然后用你的新值调用 this.setState().. 这将触发你的组件重新渲染。

const MyModal = React.createClass({

  getInitialState() {
    return { 
      showModal: false,
      bigPicSrc: '',
      infoContent: ''
    }
  },

  ...

  componentDidMount() {
    this.setState({ 
      bigPicSrc: 'http://big-pic.png'
      infoContent: <strong>Something here</strong> // not a string, but a component
    })
  },

  render() {
    return (
      <Modal show={this.state.showModal} onHide={this.close}>
        <Modal.Header closeButton>
          <Modal.Title></Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div><img ref="bigPic" src={this.state.bigPicSrc} /></div>
        </Modal.Body>
        <Modal.Footer>
          <p ref="bigPicInfo">{this.state.infoContent}</p>
        </Modal.Footer>
      </Modal>
    )
  }
})