如何動態更改React Bootstrap模式的內容？

Question

我試圖在安裝后更改模態的內容，但我無法找到要更改的正確節點。 我已將refs附加到我感興趣的節點上，並嘗試在componentDidMount（）中更改它們。 但是找不到節點 - 出現為null。

 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>
    )
  }
})

Answer 2

在我學習Bootstrap之前，我使用node並做出反應16，現在我收集了關於bout react和bootstrap的知識。 接下來，我制作模態：首先，我將來自bootstrap css和js的CDN鏈接，以及來自index.html的公共文件夾中的jquery。 接下來從ny app的SRC文件夾中創建組件的文件夾。 下一步我從新文件示例modal.js中放入bootstrap代碼，並從React中的clssName更改bootstrap類。 並且modal在這個文本上使用了Klick for show modal

。 並且認為模態的更改內容必須使用數據Json文件的一些數據你必須連接調用這個模態連接Json數據的id字段和ref或id tigger事件。 從data.json調用Id字段的不同事件。 我最好使用開關盒，方便選擇。