获取错误未捕获TypeError：value.replace不是一个函数

基本上即时创建一个Markdown预览器在Reactjs截至现在我得到错误像未捕获TypeError：value.replace是不是一个函数，并没有想法什么导致它任何帮助在这里如果我从这里删除this.format危险SetInnerHTML = {this.format（（this.rawMarkup（）））} />工作正常，但在输入框上键入时，如果我按下输入它不会带我到下一行获取错误未捕获TypeError：value.replace不是一个函数

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>

来源

2016-02-29 user5323957

当您使用markdown你不需要更换\n到<br>，你可以设置breaks选项true

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

Example

来源

2016-02-29 08:30:41

工作谢谢 – user5323957

获取错误未捕获TypeError：value.replace不是一个函数

回答

相关问题