Question

我想通过React.js创建一个不错的动态寄存器html。但是，我遇到了无法解决的错误。

这是以下错误：

未捕获的错误：元素ref被指定为字符串（内部），但未设置所有者。可能由于以下原因之一而发生： 1.您可能正在向功能组件添加引用 2.您可能正在向未在组件的render方法内创建的组件添加引用 3.您已加载多个React版本

我使用npm安装：

 $ npm install --save react react-dom
 $ npm install --save react-bootstrap

register.js ，该过程通过webpacker最终进入bundle.js

import { Grid, Row, Col, Panel } from 'react-bootstrap';

const SPECIAL_CHARS_REGEX = /[^A-Za-z0-9]/;
const DIGIT_REGEX = /[0-9]/;

class PasswordInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = { password: '' };
    }

    render() {
        let { goodPasswordPrinciples } = this.props;


        return (
            <Grid>
                <Row>
                    <Col md={8}>
                        <PasswordField />
                    </Col>
                    <Col md={4}>
                        <StrengthMeter principles={goodPasswordPrinciples} />
                    </Col>
                </Row>
            </Grid>
        );

    }
}

PasswordInput.defaultProps = {
    goodPasswordPrinciples: [
        {
            label: "6+ characters",
            predicate: password => password.length >= 6
        },
        {
            label: "with at least one digit",
            predicate: password => password.match(DIGIT_REGEX) !== null
        },
        {
            label: "with at least one special character",
            predicate: password => password.match(SPECIAL_CHARS_REGEX) !== null
        }
    ]
};

class StrengthMeter extends React.Component {
    render() {
        let { principles } = this.props;

        return (
            <Panel>
                <h5>A good password is:</h5>
                <ul>
                    {principles.map(principle => 
                   <li>
                        <small>
                            {principle.label}
                        </small>
                   </li>
                    )}
                </ul>
            </Panel>
        ); 
    }
}

class PasswordField extends React.Component {
    render() { return null; }
}

ReactDOM.render(
    <PasswordInput />,
    document.getElementById('root')
);

我想要呈现我的React代码的HTML文件是：

{% extends "layout.html" %}

{% block body %}
<div id="root"></div>

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="{{url_for('static', filename='dist/bundle.js')}}" type="text/javascript"></script>

{% endblock %}

最后，我检查了错误的第三条建议：

运行npm ls react后，我收到了此输出└── react@16.4.1，除此之外什么也没有。

React JS：元素ref被指定为字符串（内部），但未设置所有者

0 个答案: