Question

在给定以下代码的情况下，我想在high函数内部传递方法的值（return()）。

renderElement() {
    var high = 0;

    if ( this.state.trends_1[0].start[1] > this.state.trends_1[0].end[1]) {
      high = this.state.trends_1[0].start[1];
    } else {
      high = this.state.trends_1[0].end[1];
    }
    console.log('High: ', high);
    return high;
}

我试图调用它，但是它只是在我的console.log中显示结果。

render() {
  return (
    <Chart id={1} yExtents={[this.renderElement(), 100]} //also tried `this.renderElement`
  );
}

Answer 1

您也可以用这种方式完成

    render() {
      let {trends_1} = this.state
      let high = (trends_1[0].start[1] > trends_1[0].end[1]) 
                 ? trends_1[0].start[1] 
                 : trends_1[0].end[1];
      return(
        ...
        <Chart id={1}
            yExtents={[high, 100]} 
            ...
      );
}

// Find the max of values
let trends = [ 
  { start: 3, end: 2 }, 
  { start: 5, end: 1 } 
]

trendValues= [];
trends.map((trend)=> 
  Object.values(trend).map((value)=> 
    trendValues.push(value)
  )
)
console.log("trendValues", trendValues);
let high = Math.max(...trendValues);
console.log("MAX:", high);

// Another Alternative 

function findMax(trends){
  let trendValues= [];
  trends.map((trend)=> trendValues = [...trendValues, ...Object.values(trend)])
  let high2 = Math.max(...trendValues);
  console.log("High2", high2);
}

findMax(trends);

Answer 2

尝试

render() {
  const [{ start, end }] = this.state.trends_1;

  return (
    <Chart yExtends={[Math.max(start[1], end[1]), 100]} />
  );
}

现在，您不必担心在渲染器中调用其他方法。如果这不起作用，则需要检查start和end是否实际位于假定的数组中。它们也可能是NaN之类的，也请检查一下。

在return函数中传递方法的返回值

2 个答案: