代码之家 › 专栏 › 技术社区 › Luiscri

在render()组件方法上编写javascript命令

render reactjs javascript

Luiscri · 技术社区 · 7 年前

我的组件文件如下所示:

import React from 'react';
import defaultImage from './defaultImage.jpg';

export default class Game extends React.Component {
    render() {
        const image = this.props.question.attachment.url;
        const tips = this.props.question.tips;

        return (
            <div className="flexDisplay">
                <img src={image === (null || "") ? defaultImage : image} className="questionImage centerVertical" alt="Error loading, just read the question" />
                <div className="centerHorizontal centerVertical">
                    <h1>{this.props.question.question}</h1>
                    <h2 className="centerHorizontal">Pistas:</h2>   
                    {   
                        if(tips.length === 0){ //The problem comes here
                            return <div>No hay pistas disponibles</div>
                        }else{
                            tips.map((tip, i,) => {
                                return <div className="centerHorizontal" key={tip.toString()}>{i+1}. {tip}</div>;
                            })
                        }
                    }
                </div>
            </div>
        );
    }

有人发现问题了吗?

3 回复 | 直到 7 年前

Pierre Capo 7 年前

你不能使用 if

{
tips.length === 0 ? 
  (<div>No hay pistas disponibles</div>)
: (tips.map((tip, i,) => {
  return <div className="centerHorizontal" key={tip.toString()}>{i+1}. {tip}</div>;
  }));
}

Keith Brewster 7 年前

在jsx的内联条件语句中不能使用“if”。但是,您可以改用三元语法:

{   
    tips.length === 0 ? (
        return <div>No hay pistas disponibles</div>
    ) : (
        tips.map((tip, i,) => {
            return <div className="centerHorizontal" key={tip.toString()}>{i+1}. {tip}</div>;
        })
    )
}

https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

Ivan Drinchev 7 年前

在ReactJS的组件(JSX)中,除了返回值的语句之外,不允许使用任何其他语句。

您可以通过尝试分配变量来想象逻辑:

const result = if ( a ) { "b" } else { "c" } // won't work

但另一方面 Ternary Operator 会的。

const result = a ? "b" : "c";

因此,在您的案例中,有两种实现目标的方法:

{ tips.length === 0 ? ( <div>No hay pistas disponibles</div> ) : (
     tips.map((tip, i) => ( 
         <div className="centerHorizontal" key={ tip.toString() }>{i+1}. {tip}</div>
     ) )
) }

或者你可以简单地用一种方法提取它

renderTips( tips ) {
    if ( tips.length === 0 ) { return null; }
    return tips.map( ( tip, i ) => (
        <div className="centerHorizontal" key={ tip.toString() }>{i+1}. {tip}</div>
    );
}

render() {
   ...
   return (
       ...
       { this.renderTips( tips ) }
   )
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前