获取错误未捕获类型错误：value.replace 不是函数答案

【问题标题】：Getting Error Uncaught TypeError: value.replace is not a function获取错误未捕获类型错误：value.replace 不是函数
【发布时间】：2016-02-29 16:30:41
【问题描述】：

基本上我在 Reactjs 中创建一个 Markdown 预览器到目前为止，我遇到了像 Uncaught TypeError 这样的错误：value.replace 不是一个函数，并且不知道是什么原因造成的，如果我从这里危险地删除 this.format，这里有什么帮助SetInnerHTML={this .format((this.rawMarkup()))} /> 工作正常，但是在输入框上输入时，如果我按 Enter 键，它不会带我进入下一行

var App =React.createClass({
    getInitialState:function(){
        return{
            value:"My Value"
        }
    },
    updateValue:function(modifiedValue){
        this.setState({
            value:modifiedValue
        })
    },

    format: function (value) {
        return { __html: value.replace(/\r?\n/g, '<br>') };
    },
    rawMarkup: function() {
        var rawMarkup = marked(this.state.value.toString(), {sanitize: true});
        return { __html: rawMarkup };
    },
    render:function(){
        return(
            <div className="inputBox container-fluid">
                <h1 className="text-center text-primary">Hello Coders !!!</h1>
                <div className="row">
                    <div className="col-md-6 col-md-offset-1">
                        <InputBox value={this.state.value} updateValue={this.updateValue}/>
                    </div>

                    <div
                        className="outputBox col-md-6 col-md-offset-1"
                        dangerouslySetInnerHTML={this.format((this.rawMarkup()))} />
                </div>
            </div>
        );
    }
});

var InputBox =React.createClass({
    update: function() {
        var modifiedValue = this.refs.initialValue.value;
        this.props.updateValue(modifiedValue);
    },

    render:function(){
        return(
            <textarea type="text" value={this.props.value} onChange={this.update} ref="initialValue">
                        </textarea>

        );
    }
});
ReactDOM.render(<App />,
    document.querySelector("#app")
);

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>React Tutorial</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
        .outputBox,textarea{
            width: 400px;
            border: 5px solid gray;
            margin: 0;
            height: 500px;
        }

    </style>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>

【问题讨论】：

标签： reactjs github-flavored-markdown

【解决方案1】：

当您使用markdown 时，您不需要将\n 替换为<br>，您只需将breaks 选项设置为true

rawMarkup: function() {
  return { __html: marked(this.state.value, { sanitize: true, breaks: true }) };
},

Example

【讨论】：