如何动态更改 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>
    )
  }
})

Answer 2

我使用 node 和 react 16，之前我对 Bootstrap 了解得很少，现在收集我关于 bout react 和 bootstrap 的知识。接下来我制作模态：首先，我将 CDN 链接与 Bootstrap css 和 js，以及 public 文件夹中的 index.html 中的 jquery 链接。接下来从 ny 应用程序的 SRC 文件夹中为 components 创建文件夹。下一步，我将新文件示例 modal.js 中的 bootstrap 代码放入 React 中的 clssName 并更改 bootstrap class。 modal 为 show modal

编写了 Klick 文本。并认为模态的更改内容必须使用数据 Json 文件的一些数据，您必须将 Json 数据的 id 字段和 ref 或 id tigger 事件与您调用此模态连接。来自 data.json 的不同事件调用 Id 字段。我认为最好使用开关盒以便于选择。

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

How do I dynamically change the content of a React Bootstrap modal?

javascript

reactjs

react-bootstrap