Javascript 如何在JSX中添加三元运算符？

尝试为更干净的代码嵌套三元运算符，如果没有其他操作，我将使用if语句

if(x==="name"){
childMap = c.map((item,i) => (
  {i}>0? <span> and </span> : '' : ( legalOrMinor === this.ofAge(item[1]) ? <span key={i} className="childInfo">{item[0]} </span> : '')
));
return (
  <span>
  {childMap}
  </span>
);

if（x==“name”）{
childMap=c.map（（项目，i）=>(
{i} >0？和：“”：（legalOrMinor==此.ofAge（项[1]）？{项[0]}:“”）
));
返回(
{childMap}
);

有没有关于如何使这项工作的想法？如果我在末尾添加第一个三元组，它几乎可以工作，但我需要在第一次迭代之后添加“and”

---

我尝试过的任何其他逻辑都不友好。

嵌套三元表达式是一场噩梦，我强烈建议您避免它。如果您必须这样做，请记住保持结构正确。结构为

a？b:c:d

的三元表达式不是有效的语句

三元函数如下所示：

let myVar = (someBoolean ? ifTrue : ifFalse);

let myVar = (someBoolean ? ifTrue : (someOtherBoolean ? ifTrue : ifFalse));

嵌套的三元结构如下所示：

let myVar = (someBoolean ? ifTrue : ifFalse);

let myVar = (someBoolean ? ifTrue : (someOtherBoolean ? ifTrue : ifFalse));

请注意，括号使事情稍微清楚一些，但不太清楚。请尝试推理myVar将在所有四种状态的排列中是什么，

someBoolean

和

someOtherBoolean

可能是什么……这仅是两个嵌套的三元组

除了单个三元之外，几乎总是最好将其分解为

if

语句。在React中，这意味着您需要在JSX之外（例如在返回语句之前的

render

函数中）或在立即调用的函数操作符中执行。例如：

在返回前的

渲染
正文中：

render() {
    let something = undefined;
    if(this.state.foo === true) {
        if(this.state.bar === "baz") {
            something = <span>baz</span>;
        } else if(this.state.bar === "qux") {
            something = <span>qux</span>;
        }
    }
    return <div>something</div>;
}

render（）{
让某物=未定义；
if（this.state.foo==true）{
如果（this.state.bar==“baz”）{
某物=baz；
}else if（this.state.bar==“qux”）{
某物=qux；
}
}
归还某物；
}

在生活中（这应该有用，但我现在懒得检查）：

render（）{
返回(
{（函数（）{
让某物=未定义；
if（this.state.foo==true）{
如果（this.state.bar==“baz”）{
某物=baz；
}else if（this.state.bar==“qux”）{
某物=qux；
}
}
归还某物；
})()}
);
}

事实上，为了理智起见，甚至一个生命也应该被转移到它自己的事情中去：

returnSomething() {
    let something = undefined;
    if(this.state.foo === true) {
        if(this.state.bar === "baz") {
            something = <span>baz</span>;
        } else if(this.state.bar === "qux") {
            something = <span>qux</span>;
        }
    }
    return something;
}
render() {
    return (
        <div>{this.returnSomething()}</div>
    );
}

returnSomething（）{
让某物=未定义；
if（this.state.foo==true）{
如果（this.state.bar==“baz”）{
某物=baz；
}else if（this.state.bar==“qux”）{
某物=qux；
}
}
归还某物；
}
render（）{
返回(
{this.returnSomething（）}
);
}
IMO你应该提取这个逻辑。你在这里的初衷不太清楚；这里没有
{i}
JS中的语法，也不清楚您所说的
是什么意思：“…”
。您需要更清楚地说明您的需求，或者至少用感性的代码。Thamks用于输入。因此…这是在“i”中是由映射生成的索引。因此我使用它来同时遍历Parralel数组，并为数组提供一个唯一的键。我尝试做的主要事情是这样的：“item”{thing}”item“{thing}”item“{thing}”item我想说除了最后一个，把这个放在每个项目后面。或者除了第一个，把这个放在每个项目前面。谢谢你。我想我只是不喜欢写“qux”的想法。所以我的问题是，我不知道如何用map来做这件事？我需要在我的东西地图中添加一个“and”，item“{and}”item“{and}”项。@ElijahLucian请记住，
map（）
中的函数需要
返回一个值，否则它将返回
未定义的值。
map（）的全部思想
是将一个数组转换为另一个数组，方法是将每一项处理为新的内容。在文章中的代码中，您没有从函数返回，这可能也是您现在尝试的任何内容的问题。