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做了模态

。并且认为模态的更改内容必须使用数据Json文件的一些数据你必须连接调用这个模态连接Json数据的id字段和ref或id tigger事件。从data.json调用Id字段的不同事件。我最好使用开关盒，方便选择。

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

2 个答案: