Question

我试图在渲染函数中调用函数内部条件，仅当条件为真时才调用。

以下代码的第3行。

{this.props.xarray.map((heading, index) => 
        {return heading.headingis.toLowerCase().indexOf('mobile') != -1 ?
            {this.setcheckstate()} //THIS IS FUNCTION
            <option value="{heading.headingis}" key={index} selected>{heading.headingis}</option>
            :
            <option value="{heading.headingis}" key={index}>{heading.headingis}</option>
         }
    )}

但这是返回错误：

语法错误：这是一个保留字（51:10）

如果条件为真，我想改变状态。

Answer 1

你为什么不放弃这个ternarny？编写简单的if语句IMO有时更清晰，更清晰。

{
  this.props.xarray.map((heading, index) => {
    if (heading.headingis.toLowerCase().indexOf('mobile') != -1) {
      this.setcheckstate();
      return <option value="{heading.headingis}" key={index} selected>{heading.headingis}</option>
    }

    return <option value="{heading.headingis}" key={index}>{heading.headingis}</option>
  })
}

Answer 2

您需要将条件置于返回之外，因为这不是有效的语法。

Answer 3

会是这样的，外部返回渲染方法

 const { xarray } = this.props;

在render（）

的返回方法中

{xarray.map((heading, i) => {
  const { headingis } = heading;
  const condition = headingis.toLowerCase().indexOf('mobile') != -1;
  return (
    condition && this.setCheckState() ? 
        <option value={headingis} key={i} selected>{headingis}</option> :
        <option value={headingis} key={i}>{headingis}</option> :
  );
}}

对不起，我做了所有破坏，但这只是一种习惯，我喜欢干净的代码。无论如何，如果您只想根据条件显示所选内容，您也可以执行类似的操作。

{xarray.map((heading, i) => {
  const { headingis } = heading;
  const condition = headingis.toLowerCase().indexOf('mobile') != -1;
  return (
    condition && <option 
                   value={headingis} 
                   key={i} 
                   selected={() => this.setCheckState}
                 >
                   {headingis}
                 </option>
  );
})}

在条件内调用函数 - Reactjs

3 个答案: