使用多个三元运算符渲染 React 组件答案

【问题标题】：Render a React Component Using Multiple Ternary Operator使用多个三元运算符渲染 React 组件
【发布时间】：2021-11-15 17:31:06
【问题描述】：

我目前在使用多个三元运算符渲染组件时遇到问题。

这是我的代码：

{data.shippingData ? (
   <CheckoutPayment data={data} setData={setData} />
  ) : data && data.agree === true ? (
                console.log("Hello World")
              ) : (
                    <CheckoutShipping setData={setData} />
                  )}

<CheckoutPayment /> 和 <CheckoutShipping /> 组件成功渲染没有问题，问题在于必须使用此条件渲染另一个组件 data && data.agree === true。在上面的代码中，我尝试使用console.log 记录“Hello World”，但无济于事。

这是<CheckoutPayment />中数据模型的结构方式：

{shippingData: {firstName, lastName, streetAddress, state, city, phoneNumber }, agree: true}

我将<CheckoutPayment /> 组件中的数据放入全局状态，我必须将数据传递给另一个组件。

数据在该州可用。事实上，我console.log 数据是为了确认它是否存在。

我想实现的是：

如果数据对象中有shippingData，我想渲染<CheckoutPayment />，否则
数据对象中有shippingData and agree我要console.log("Hello World") else
渲染<CheckoutShipping />

我的问题是，有没有一种方法我可能误用了三元运算符，或者我没有做对。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

为什么不把它放在一个函数中，然后从 render() 调用那个函数？

getComponentToRender() {
   if(shippingData) {
     return <CheckoutPayment data={data} setData={setData} />;
   } else if(!(data || data.agree)) {
      return <CheckoutShipping />;
   } else {
     console.log("Hello World");
   }
   return null;
}

在您的渲染中，您可以执行以下操作：

render() {
  return(
   <>{this.getComponentToRender()}</>
 );
}

【讨论】：

兄弟，你忘记了第二个if上的return关键字
谢谢@nouvist。更新相同。
是的，这里的关键是在返回 null 或实际应该呈现的任何占位符之前控制台日志
感谢您的回复。我正在使用功能组件。好吧，我在使用功能组件之前已经这样做了，但仍然没有工作。我认为问题应该是我如何获取数据。数据的结构是这种格式{shippingData: {…}, agree: true}
@OgeObubu 我认为如果您可以共享数据对象或其模型，它可能会有所帮助

【解决方案2】：

它与三元无关，只是 console.log() 返回 undefined 并且不会渲染任何东西。我认为 child.render() 是最终运行的，子实例通常是对象而不是函数

您正在尝试将 console.log() 的返回 (undefined) 的结果呈现为兄弟节点（它们都需要包装在父节点或像 <></> 这样的片段中

您应该从渲染返回中删除 console.log，然后

console.log 在返回任何内容之前
render null 或任何应该存在的占位符错误，可能只是一个文本节点Hello World

【讨论】：

可能我不够清楚。我用console.log 替换了应该存在的组件。尽管有数据，该组件甚至不会呈现。我正在编写一个 React 多表单函数

【解决方案3】：

谢谢大家的贡献。我不认为它可能。我已经能够弄清楚代码了。

我改变了代码的移动。我必须 return console.log 到代码的顶部，结果很好。

【讨论】：