1

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

这是我的代码：

{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通过数据来确认它是否存在。

我想实现的是：

  1. 如果shippingData在数据对象中有我想渲染<CheckoutPayment />，如果
  2. 在shippingData and agree我想要的数据对象中console.log("Hello World")有
  3. 使成为<CheckoutShipping />

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

4

3 回答 3

4

为什么不把它放在一个函数中，然后从 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()}</>
 );
}
于 2021-11-15T17:39:51.880 回答
1

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

console.log()您正在尝试将' return ( )的结果呈现undefined为兄弟节点（这两个节点都需要包装在父节点或片段中，例如<></>

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

  1. 返回任何东西之前的console.log
  2. 渲染 null 或任何应该存在的占位符错误，可能只是一个文本节点Hello World
于 2021-11-15T17:48:42.587 回答
0

谢谢，伙计们的贡献。我不认为它可能。我已经能够弄清楚代码了。

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

于 2021-11-15T20:10:41.200 回答