前提・実現したいこと
Propsを親から子に渡し、さらにそのpropsをその子に渡したいと考えています。
親から子に関してはFlatList
の中で、Listにmainuser: this.state.head
をpushし、renderItem={({ item }) => <CommentItem {...item}
で子に渡しています。
子(CommentItem)の受け取りに関しては、constにmainuser
を設定することで
子で受け取れるようになっています。
JS
1const CommentItem = (props) => { 2 const { 3 mainuser, 4 } = props; 5 return ( 6 <View style={styles.container}> 7 <View style={styles.left}> 8 <Text style={styles.text}>{text}</Text> 9 </View> 10 <View style={styles.function}> 11 <Button {...mainuser} /> 12 </View> 13 </View> 14 ); 15} 16 17export default CommentItem;
さらにこの親から子(CommentInput)が受け取ったmainuser
を、そのまた子(孫?<Button>)に渡したいと考えています。
<Button {...mainuser} />
で子から孫に渡すことができているとは思うのですが、
孫ではrenderのなかにconst { mainuser,} = this.props;
を記述して受け取れてはいると思うのですがmainuser
は空になっています。
孫(Button.js)は以下のようになっています
JS
1export default class Button extends Component { 2 3 constructor(props) { 4 super(props); 5 this.state = { 6 count: 0, 7 }; 8 } 9 render() { 10 const { 11 mainuser, 12 } = this.props; 13 14 return ( 15....
親は以下のようになっています(App.js)
JS
1export default class App extends Component<{}> { 2 3 constructor(props) { 4 super(props); 5 6 this.state = { 7 head: [], 8 list: [], 9 }; 10 } 11 12 _onPress = (text) => { 13 const list = [].concat(this.state.list); 14 15 list.push({ 16 key: Date.now(), 17 text: text, 18 done: false, 19 mainuser: this.state.head, 20 }); 21 22 this.setState({ 23 list, 24 }); 25 } 26 27 render() { 28 const { 29 head, 30 list, 31 } = this.state; 32 33 var data = [["User1", "User2", "User3"],]; 34 35 return ( 36 <View style={styles.container}> 37 <View style={styles.dropdownHeader}> 38 <View style={styles.dropdown}> 39 <DropdownMenu 40 style={{flex: 1}} 41 bgColor={'white'} 42 tintColor={'#666666'} 43 activityTintColor={'green'} 44 handler={(selection, row) => this.setState({head: data[selection][row]})} 45 data={data} 46 > 47 </DropdownMenu> 48 </View> 49 </View> 50 <Text>To Do</Text> 51 <View style={styles.main}> 52 <View style={styles.post}> 53 </View> 54 <View style={styles.postinput}> 55 <CommentInput onPress={this._onPress} /> 56 </View> 57 <View style={styles.CommentListContainer}> 58 <FlatList 59 style={styles.CommentList} 60 data={list} 61 renderItem={({ item }) => <CommentItem {...item} />} 62 /> 63 </View> 64 </View> 65 </View> 66 ); 67 } 68}
お聞きしたいこと
まとめると以下のようになります。
親(App.js) = FlatListのアイテムにmainuser: this.state.head
をPushして、子に渡す。
子(CommentItem) = const {mainuser} = props;
で受け取り、<Button {...mainuser} />
で孫に渡す
孫(Button) = render内のconst {mainuser} = props;
で受け取れているはず?
このようにPropsを親から子、子から孫(?)に渡すことは可能なのでしょうか?
また、上記のプロセスで間違いの場所はありますでしょうか?
何かアドバイスがありましたら幸いです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/14 12:29
2019/02/14 12:38