將道具傳遞到渲染方法中的函數

Question

我有一些從我的Redux商店返回的值，我想通過某些函數進行某些格式化和處理。

在下面的例子中，它似乎沒有工作。任何人都可以爲我提供一個解決方案，我可以從render方法運行函數，將prop數據傳遞給這些函數以及從這些函數返回值，並與周圍的JSX內聯？

我希望能夠運行相同的功能，並在渲染方法中的任何位置傳遞不同的道具。

這些都是錯誤，我在控制檯中：

Uncaught TypeError: Cannot read property '_currentElement' of null 

Uncaught TypeError: Cannot read property '__reactInternalInstance$7wovvyrz8nu' of null 

Uncaught (in promise) TypeError: Cannot read property 'myValue' of null 

而且我的代碼：

import React, { Component } from 'react'; 
import { connect } from "react-redux"; 

@connect((store) => { 
    return { 
    propsData: store.myData.propsData 
    }; 
}) 

class MyApp extends Component { 

reverseFunc(value){ 

const reverseValue = value.reverse(); 

return { 
    reverseValue 
    } 
} 

render() { 
    return <h1> My props data reversed is: {this.reverseFunc(this.props.propsData.myValue)} </h1>; 
    } 
} 

export default MyApp; 

終極版商店示例：

const initialState = { 
    propsData: null 
} 

switch (action.type) { 
case LOAD_PROPS: { 
    return { 
    ...state, 
    propsData: action.data 
    } 
} 
} 
return state 
} 

Answer 1

不能打印Object s或Array s在JSX中，所以你唯一的選擇是將它們轉換成字符串，這就是爲什麼我的廣告ded toString在我的例子中。如果您要反轉字符串，請取消註釋func的第3行並刪除reverseFunc的第一行。

import React, { Component } from "react"; 
 
import { connect } from "react-redux"; 
 

 
@connect(store => { 
 
    return { 
 
    propsData: store.myData.propsData 
 
    }; 
 
}) 
 
class MyApp extends Component { 
 
    reverseFunc(value){ 
 
    if(value !== null){ 
 
     return value.reverse().toString(); 
 
    } 
 
    // OR 
 
    // return value.split('').reverse().join(''); 
 
    } 
 
    render() { 
 
    return (
 
     <h1> 
 
     My props data reversed is: {this.reverseFunc(this.props.propsData)} 
 
     </h1> 
 
    ); 
 
    } 
 
} 
 

 
export default MyApp;