如果子元素为空，则隐藏整个父元素

Question

我是 React 新手，如果孩子有 null，我想隐藏父 div，li 数据通过 props 传递

import React from 'react';

const PublicationTags = (props) => {
    return (
        <div className="publication-tags">
            <h4>Темы публикации</h4>
            <ul>
                {props.data &&
                    props.data.tag_names &&
                    props.data.tag_names.map((tag_name, key) => (
                        <li key={key}>
                            <a href="/">{tag_name}</a>
                        </li>
                    ))}
            </ul>
        </div>
    );
};

export default PublicationTags;

如果li项没有数据我想隐藏and标签。

Answer 1

<ParentDiv style={this.props.data===null ? {display:'none'}:{display:'flex'}>{this.props.data}</ParentDiv>

希望这会有所帮助。

Answer 2

取决于应用程序的整体结构，但您可以执行以下操作：

import React from 'react';

const PublicationTags = props => {
  if (!props.data.length) {
    return null;
  }

  return (
    <div className="publication-tags">
      <h4>Темы публикации</h4>
      <ul>
        {props.data &&
          props.data.tag_names &&
          props.data.tag_names.map((tag_name, key) => (
            <li key={key}>
              <a href="/">{tag_name}</a>
            </li>
          ))}
      </ul>
    </div>
  );
};

export default PublicationTags;

或：

import React from 'react';

const PublicationTags = props => {
  return props.data.length ? (
    <div className="publication-tags">
      <h4>Темы публикации</h4>
      <ul>
        {props.data &&
          props.data.tag_names &&
          props.data.tag_names.map((tag_name, key) => (
            <li key={key}>
              <a href="/">{tag_name}</a>
            </li>
          ))}
      </ul>
    </div>
  ) : null;
};

export default PublicationTags;