2
我正在學習react和redux.I構建一個模擬項目,雖然運行該項目沒有錯誤,但是當我點擊主線路時沒有呈現任何錯誤, 我的容器代碼,反應路由器不使用渲染元件時使用REDX
import Home from '../components/Home.js'
import {
editorContentUpdated
} from '../action/index.js'
const mapStateToProps = (state) => {
return {
editorText: state.editorText
};
}
const mapDispatchToProps = (dispatch) => {
console.log('here')
onBlur: (text) => {
console.log('text', text);
dispatch(editorContentUpdated(text));
}
}
export default (mapStateToProps, mapDispatchToProps)(Home);
減速器代碼,
const editorReducer = (state, action) =>{
if(state == undefined){
return null
}
console.log('editorReducer',action.payload);
switch(action.type){
case 'EDITOR_SELECTED':
return action.payload
break;
case 'CONTENT_UPDATED':
return action.payload
break;
}
return state;
}
export default editorReducer;
行動創世,
export const getPreviewContent = (text) =>{
console.log('previewContent', text);
return{
type:'PREVIEW_SELECTED',
data:text
}
}
export const editorContentUpdated =(text) =>{
console.log('editor content', text);
return {
type:'CONTENT_UPDATED',
data:text
}
}
routes.js文件,
import React from 'react'
import{Router,Route,IndexRoute,browserHistory} from 'react-router'
import Layout from '../components/Layout.js'
import Home from '../container/editor.js'
import Preview from '../components/Preview.js'
const routes = (
<Router history={browserHistory}>
<Route path='/' component={Layout}>
<IndexRoute component={Home} />
<Route path='preview' component={Preview} />
</Route>
</Router>
);
export default routes;
import React from 'react'
import {
Link
} from 'react-router'
import {
connect
} from 'react-redux'
var Layout = React.createClass({
render: function() {
var styles = {
paddingRight: '10px'
}
console.log('custom', this.props.custom);
var custom = this.props.custom;
return (<html >
<head >
<title > {custom.title} < /title> <link rel = 'stylesheet href = '/style.css'/>
</head> <body >
<nav >
<Link style = {styles
}to = '/' > Home < /Link> <
Link to = '/preview' > Preview < /Link> </nav> {
this.props.children
}<script dangerouslySetInnerHTML = {{
__html: 'window.PROPS=' + JSON.stringify(custom)
}}/> <script src = '/bundle.js'/>
</body> </html>);}
});
var wrapper = connect(
function(state) {
return {
custom: state
};
}
);
export default wrapper(Layout);
import React from 'react'
import {
Link
} from 'react-router'
let Home = React.createClass({
getInitialState: function() {
return {
editorText: ''
}
},
updateText: function(event) {
this.setState({
editorText: event.target.value
})
},
render: function() {
let wrapperStyle = {
width: '100%'
}
let editorStyle = {
float: 'left',
width: '50%',
height: 'auto'
}
let previewBoxStyle = {
float: 'left',
height: 'auto',
width: '50%'
}
return (<
div style = {
wrapperStyle
} >
<
div style = { editorStyle} >
<textarea rows = '10' cols = '50'onChange = {this.updateText}
value = {this.props.editorText}/> </div> </div>);}
});
有在控制檯沒有錯誤,但是當我點擊主頁按鈕家裏組件沒有渲染,任何人都可以建議我哪裏錯了?
C你分享你的'Layout'和'Home'組件的代碼嗎? –
我已添加組件代碼 – Idlliofrio