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

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或其他东西，检查它。