Question

我正在制作一个Markdown预览器＆＃39;使用ReactJS。但是，我被困在一个看起来很好的代码。错误只是一个意外的标识符=＆＃39;。似乎无法解决为什么它会显示此错误。

以下是我的代码段..

class Markdown extends React.Component {
    static defaultProps = {
        text : 'This comes from defaultProps !'
    };

    static propTypes = {
        text : React.PropTypes.string.isRequired,
        onChange : React.PropTypes.func.isRequired;
    };

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        this.props.onChange(e.target.value);
    }

    render() {
        const style = {
            width : '100%',
            fontSize : '18px',
            border : '1px solid grey',
            padding : '20px'
        };

        return (
            <textarea style={style} rows='20' placeholder='// Enter text here ..' onChange='this.handleChange'>
                {this.props.text}
            </textarea>
        );
    }
}

这是项目代码链接.. https://codepen.io/iamrkcheers/pen/oeEyvo

错误发生在第67行。

感谢任何帮助。谢谢。

Answer 1

我的解决方案就是这个，引用react documentation regarding type checking并创建defaultProps作为静态函数，以便每次都能获取它们。

class Markdown extends React.Component {

    static defaultProps() { 
        return {
            text : 'This comes from defaultProps !'
        };
    }


    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        this.props.onChange(e.target.value);
    }

    render() {
        const style = {
            width : '100%',
            fontSize : '18px',
            border : '1px solid grey',
            padding : '20px'
        };

        return (
            <textarea style={style} rows='20' placeholder='// Enter text here ..' onChange='this.handleChange'>
                {this.props.text}
            </textarea>
        );
    }
}

Markdown.propTypes = {
        text : React.PropTypes.string.isRequired,
        onChange : React.PropTypes.func.isRequired
};

Answer 2

在JSX中，您需要使用双引号将props传递给元素。

您正在使用单引号，这将无效并导致错误。

另一个错误是将更改处理程序包含在单引号中，在这种情况下，您必须使用花括号，因为它实际上是您希望React执行的JavaScript参数，而不是字符串。

return (
    <textarea style={style} rows="20" placeholder="// Enter text here .." onChange={this.handleChange}>
        {this.props.text}
    </textarea>
);

Answer 3

没有React的任何经验，但在我看来，你需要在你的“返回”中使用某种字符串引用。功能。对于javascript来说肯定会引发你所看到的错误。

在React中编码时出现意外的标识符

3 个答案: