Question

render语句中的函数不起作用。如何将该函数作为className的一部分调用？ this._displayLogic().showATraffic()返回undefined。

预期结果： classname ="up blue"，

当前结果： “up”和an error in console.

class LineStatus extends React.Component{
  constructor(props){
    super(props);
  }
  _displayLogic=()=>{
    var showATraffic=()=>{
        return "blue";
    };
    var showBTraffic=()=>{
        return "Yellow";
    };

    console.log(showATraffic()+"....."); //this works.
  }

 componentWillMount(){
  this._displayLogic();
 }
  render(){
    return(
        <div className="status-content collapse" key={this.props.key}>
          <div className={"up "+this._displayLogic().showATraffic()}>
            <Row className="show-grid">
                <span>Approval</span>
            </Row>
            <Row className="status-subcontent collapse">
              Line content goes here.
            </Row>
          </div>
)
  }
}

Answer 1

_displayLogic应该在调用时返回一个对象，例如

_displayLogic=()=>{
  var showATraffic = () => 'blue'
  var showBTraffic = () => 'Yellow'
  return {showATraffic, showBTraffic};
}

javascript嵌套函数调用reactjs渲染类名

1 个答案: