Question

我试图在React中使用<Conditional if={condition}>组件，该组件仅在条件为true时才呈现其内容。

我使用了here中的代码，如Broda Noel对this question的答复中所提到的。您还会看到代码here。

import * as React from 'react';

const Conditional = props => (
    !!props.if && props.children
);

class Item extends React.Component {
    render() {
        const item = { id: 2 };

        return (
            <>
                <h2>Item detail</h2>
                {/* Display item.foo.name if `foo` property exists */}
                <Conditional if={item.foo}>
                    {item.foo.name}
                </Conditional>
            </>);
    }
}

export default Item;

它失败并显示以下错误：

Uncaught TypeError: Cannot read property 'name' of undefined

我知道我也可以使用{item.foo && item.foo.name}，但是当代码变得更加复杂时，我发现使用Conditional更具可读性。最重要的是，我真的很想了解这里发生的事情。

为什么即使条件为假，React也会渲染条件的内容？有没有办法更改条件组件以使其在这种情况下起作用？

我正在使用带有打字稿的React 16.4.1。

Answer 1

代码：

<Conditional if={item.foo}>
  {item.foo.name}
</Conditional>

被编译为：

React.createElement(Condition, { if: item.foo }, item.foo.name)

因此，即使条件为假，它也会尝试访问属性name。

我建议您在代码变得更复杂时使用以下代码：

import * as React from 'react';

class Item extends React.Component {
  renderConditional (item) {
    if (!item.foo) {
      return null;
    }
    return item.foo.name; // Or some jsx
  }

  render() {
    const item = { id: 2 };

    return (
      <>
        <h2>Item detail</h2>
        {this.renderConditional(item)}
      </>
    );
  }
}

export default Item;

您还可以创建另一个组件来显示数据并检查新组件内的对象。

Answer 2

问题是您的组件<Conditional>在if道具中没有逻辑表达式。为此，“反应方式”是使用条件渲染：

render() {
    const item = { id: 2 };

    return (
      <>
        <h2>Item detail</h2>
        { item.foo !== undefined &&  // React Way to Conditional Rendering
          {item.foo.name}
        }
      </>
    );
}

我建议您阅读Conditional Rendering

的文档

使用ReactJS进行条件渲染的问题

2 个答案: