需要添加对组件的渲染方法的引用。 addComponentAsRefTo(...)

Question

我相信我理解以下错误，但我不完全理解解决方案。

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

import Modal from 'react-bootstrap-modal';
//import MyCustomObject from './MyCustomObject';
import ReactTelInput from 'react-telephone-input';

...
render(){
    return (
        <Modal show={this.props.showModal}>
            <Modal.Header>
                <Modal.Title>This is a heading </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                    <ReactTelInput
                        defaultCountry="us"
                        flagsImagePath='../../images/flags.png'
                        onChange={this.handleInputChange}
                        onBlur={this.handleInputBlur}
                    /> // was previously <MyCustomObject/>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={this.props.changeModal}>Close</Button>
            </Modal.Footer>
        </Modal>
    );
 }

我的理解是，由于模态框无法识别 MyCustomObject，因此它不知道如何呈现它。那么，我该如何解决这个问题呢？有没有办法直接将 MyCustomObject 添加到 Modal 对象中？我的下一个想法是创建我自己的模式 class，扩展 react-bootstrap-modal，然后简单地从 MyCustomObject 导入这个扩展，但这也没有用。

那么，我怎样才能在像 react-bootstrap-modal 这样的东西中渲染我自己的对象？

Answer 1

这个问题很难搞清楚，因为我用的是facebook原版的react实现方式。在我的 index.cshtml 文件中，我有：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>

所以，react 是通过节点模块加载一次，一次是在这里。这很难弄清楚，因为我在技术上确实通过节点模块做出了一次反应。将它加载到 cshtml 中让我很伤心。

因此，我还必须添加到我的 webpack.config 文件中才能正确加载反应并从我的 cshtml 中删除脚本。

loaders: [
    {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['es2015', 'react']
        }
    }

需要添加对组件的渲染方法的引用。 addComponentAsRefTo(...)

Need to add a reference to a component's render method. addComponentAsRefTo(...)

render

reactjs