ReactJSとMaterial-UI@Nextでフロントエンド開発を行なっています。
withStylesでstyleSheetを適用するというのがMaterial-UIのコンポーネントのカスタマイズ方式なのですが、この時にパラメータも同時に渡す方法を探しています。
下記のコード、Sample.jsをContainerから使用します。
<Sample params={{test : 123}}> というように、Sample.js内でpropsを受け取り、DOM生成の仕組みを作りたいのです。
しかし、withStylesを使用する場合、このparamsが使用できないため、何か方法がないか試行錯誤しています。
わかる方がいらっしゃれば、お願い致します。
ReactJS
1// Sample.js 2import { withStyles } from 'material-ui/styles'; 3 4const styles = { 5 root: { 6 background: 'red', 7 }, 8}; 9 10class MyComponent extends React.Component { 11 render () { 12 return <div className={this.props.classes.root} />; 13 } 14} 15 16export default withStyles(styles)(MyComponent);
ReactJS
1// MainContainer.js 2import React, { Component, PropTypes } from 'react'; 3import { bindActionCreators } from 'redux'; 4import { connect } from 'react-redux'; 5 6// action 7import * as MainAction from 'action/main_action.jsx'; 8 9// component 10import Sample from 'component/sample.js'; 11 12 13class MainContainer extends Component { 14 15 constructor(props) { 16 super(props); 17 this.state = {} 18 } 19 20 componentWillMount(props) {} 21 22 render() { 23 const { reducers, actions } = this.props; 24 return ( 25 <div> 26 <Sample params={{test : 123}} /> 27 </div> 28 ) 29 } 30} 31 32 33function mapStateToProps(state, ownProps) { 34 return { 35 reducers : Object.assign( 36 state.MessengerReducer, 37 ), 38 } 39} 40 41function mapDispatchToProps(dispatch) { 42 return { 43 actions : Object.assign( 44 bindActionCreators(MessengerAction, dispatch), 45 ), 46 } 47} 48 49 50export default connect( 51 mapStateToProps, 52 mapDispatchToProps 53)(MessengerContainer) 54
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。