如何将道具导入正在组件中呈现的函数中

Question

在react DApp中，我可以在组件主渲染函数中显示Redux存储中的值。但我不知道如何将它传递给正在传递给render主函数的函数。我所尝试的一切都失败了。

以下是一些正在运行的代码。我想在其他组件中重复使用它。

我们将重点关注象征符号。

Actions.js

export function tokenSymbolLoaded(symbol) {
return {
type: 'TOKEN_SYMBOL_LOADED',
symbol
}
}

交互.js

import {tokenLoadedSymbol} from './actions'
export const loadTokenSymbol = async (token, dispatch) => {
const symbol = await token.methods.symbol().call()          
console.log(symbol)
dispatch(tokenSymbolLoaded(symbol))
return symbol
}

Selectors.js

const tokenSymbolLoaded = state => get(state, 'token.symbol')
export const tokenSymbolLoadedSelector = createSelector(tokenSymbolLoaded, tls => tls)

Reducers.js

import { combineReducers } from 'redux';
function token(state = {}, action) {
switch (action.type) {
case 'TOKEN_LOADED':
return { ...state, loaded: true, contract: action.contract }
case 'TOKEN_SYMBOL_LOADED':
return { ...state, loaded: true, symbol: action.symbol}
default:
return state
}
}

组件(删除了不必要的html(

import {tokenSymbolLoadedSelector} from '../store/interactions'

class MyTransactions extends Component {
render() {

return  (
<some html> {this.props.symbol} </some html>
)
}
}

function mapStateToProps(state) {
return {
symbol: tokenSymbolLoadedSelector(state)
}
}
export default connect(mapStateToProps)(MyTransactions);

此代码正在工作。现在我想在我的DApp的其他组件中重用这个符号选择器。但另一个组件是由多个功能组成的，这就是它不起作用的地方，我想了解为什么。

另一个组件内部的非工作代码；

import {
priceChartLoadedSelector,
priceChartSelector,
tokenSymbolLoadedSelector
} from '../store/selectors'

const showPriceChart = (priceChart) => {

return(
<h4>{this.props.symbol}/ETH &nbsp; {priceSymbol(priceChart.lastPriceChange)} &nbsp; {priceChart.lastPrice}</h4>   
)
}

class PriceChart extends Component {
render() {
return (
<div >
{this.props.priceChartLoaded ? showPriceChart(this.props.priceChart) : <Spinner />}
</div>
)
}
}

function mapStateToProps(state) {
return {  
priceChartLoaded: priceChartLoadedSelector(state),
priceChart: priceChartSelector(state),
symbol: tokenSymbolLoadedSelector(state),
}
}

export default connect(mapStateToProps)(PriceChart)

这是抛出的错误：

未处理的拒绝(TypeError(：无法读取未定义的属性"props">

Answer 1

好吧，您的代码不起作用的原因是您试图从类组件中调用showPrice方法。如果你调用了它。它可能会被调用，但你不会引用this关键字。除了希望，还有一种方法叫priceSymbol。

class PriceChart extends Component {
showPriceChart = (priceChart) => {

return(
<h4>{this.props.symbol}/ETH &nbsp; {priceSymbol(priceChart.lastPriceChange)} &nbsp; {priceChart.lastPrice}</h4>   
)
}
render() {
return (
<div >
{this.props.priceChartLoaded ? this.showPriceChart(this.props.priceChart) : <Spinner />}
</div>
)
}
}