2
반응이 좋고 redux를 배우고 있습니다. 프로젝트를 실행하는 동안 프로젝트를 실행하는 동안 오류가 발생하지 않지만 집 경로를 클릭하면 아무 것도 렌더링되지 않습니다. 내 컨테이너 코드 ,redux를 사용할 때 라우터가 반응하지 않을 때 라우터를 반응 시키십시오.
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>);}
});이 콘솔에 오류가 없다,하지만 난 홈 버튼을 클릭하면 홈 구성 요소가 렌더링되지 않습니다 누구나 제안 할 수 나 어디서 잘못 될거야? 당신의 Home 구성 요소에서
C의 사용을 만들 필요가, 당신의 구성 요소에 사용할 수있는
store을해야 당신은'Layout'과'Home' 컴포넌트에 대한 코드를 공유합니까? –구성 요소 코드를 추가했습니다. – Idlliofrio