Question

我试图在PHP网页中渲染一个React元素。事情是我有一段时间没有触及React（6个月+）并且有点生锈......

当然，我在尝试之前尝试过搜索答案，但大多数解决方案都涉及在React文件本身中导出React元素。事实上，我需要导出DOM本身的元素，以便为它提供初始的PHP数据。

无论如何，我一直在控制台中收到此错误，我不知道如何解决它。

react-with-addons.js:5221 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
printWarning @ react-with-addons.js:5221
warning @ react-with-addons.js:5245
createElement @ react-with-addons.js:2283
(anonymous) @ new_booking:265
react-dom.js:18118 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
    at invariant (react-dom.js:18118)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (react-dom.js:16179)
    at ReactCompositeComponentWrapper.performInitialMount (react-dom.js:4828)
    at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4719)
    at Object.mountComponent (react-dom.js:11551)
    at mountComponentIntoNode (react-dom.js:9772)
    at ReactReconcileTransaction.perform (react-dom.js:14760)
    at batchedMountComponentIntoNode (react-dom.js:9794)
    at ReactDefaultBatchingStrategyTransaction.perform (react-dom.js:14760)
    at Object.batchedUpdates (react-dom.js:8825)

以下是代码：

PHP页面

<?php defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html>

<head>
    <link href="<?=STATIC_REPO;?>css/parsley.css" rel="stylesheet" type="text/css" />
    <link href="<?=STATIC_REPO;?>vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- Wrapper start -->
<div id="wrapper">
    <?php $this->load->view('staff/_snippets/navbar_staff'); ?>
    <!-- Page Content start -->
    <div id="page-wrapper">
        <ol class="breadcrumb">
            <li><a href="<?=site_url('staff/authenticate_staff/start');?>">Home</a></li>
            <li><a href="<?=site_url('staff/room_booking/browse_bookings');?>">Bookings</a></li>
            <li class="active">New Booking</li>
        </ol>

        <div class="row">
            <div class="col-md-12">

                <div class="page-header">
                    <h2>New Booking</h2>
                </div>

                <div class="col-md-11">
                    <div class="row">

                        <form id="new_booking_form" role="form" class="form-horizontal" method="post" data-parsley-validate>
                            <div id="TestReact"></div>

                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-2">
                                    <button id="submit_btn" type="submit" class="btn btn-primary">
                                        <i class="fa fa-check fa-fw"></i> Submit</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Page Content end -->

</div>
<!-- Wrapper end -->
<?php $this->load->view('admin/_snippets/body_resources_admin'); ?>
<script src="<?=STATIC_REPO;?>vendor/parsleyjs/parsley.min.js"></script>
<script src="<?=STATIC_REPO;?>vendor/moment/moment.min.js"></script>
<script src="<?=STATIC_REPO;?>vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

<script src="<?=STATIC_REPO;?>vendor/moment/moment.min.js"></script>
<script src="<?=STATIC_REPO;?>vendor/numeral/numeral.min.js"></script>
<script>
let dateFormat = 'DD-MM-YYYY';

$(document).ready(function() {
    $('#start_date').datetimepicker({
        format: dateFormat
    });

    $('#end_date').datetimepicker({
        format: dateFormat
    });
});
</script>

<!-- react resources -->
<script src="<?=STATIC_REPO;?>vendor/react/react-with-addons.js"></script>
<script src="<?=STATIC_REPO;?>vendor/react-dom/react-dom.js"></script>
<scirpt src="<?=STATIC_REPO;?>react/dist/TestReact.js"></script>
<script>
    let element = React.createElement(TestReact);

    ReactDOM.render(
        element,
        document.getElementById('TestReact')
    );
</script>
</body>
</html>

用gulp编译成JS的JSX代码。这当前只是检查我的React是否设置正确的测试元素。

const TestReact = React.createClass({
    render: function() {
        console.log('TestReact rendered.');
        return (
            <div>
                <h1>This is a Test React class. Hello World</h1>
            </div>
        );
    }
}); //end TestReact class

React.createElement：type无效 - 期望的字符串

0 个答案: