Question

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

未捕获错误：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在为未在组件的render方法中创建的组件添加引用，或者您有多个React已加载的副本

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

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

那么，如何在react-bootstrap-modal之类的内容中呈现自己的对象？

Answer 1

这个问题很难理解，因为我正在使用facebook的原始实现方法。在我的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>

因此，反应通过节点模块加载一次，并在此处加载一次。这很难理解，因为我在技术上已经通过节点模块做出了一次反应。将它加载到cshtml中就是毁了我的。

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

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

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

1 个答案: