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

我是新手，我想隐藏父div，如果子对象为null，则li数据通过道具传递

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;

从“React”导入React；
const PublicationTags=（道具）=>{
返回(
Темы публикации

{props.data&&
props.data.tag_名称&&
props.data.tag\u names.map（（tag\u name，key）=>(


))}

);
};
导出默认PublicationTags；

如果li项上没有数据，我想隐藏and标记。

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

---

希望这有帮助

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

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;

从“React”导入React；
const PublicationTags=props=>{
如果（！props.data.length）{
返回null；
}
返回(
Темы публикации

{props.data&&
props.data.tag_名称&&
props.data.tag\u names.map（（tag\u name，key）=>(


))}

);
};
导出默认PublicationTags；

或：

从“React”导入React；
const PublicationTags=props=>{
返回props.data.length(
Темы публикации

{props.data&&
props.data.tag_名称&&
props.data.tag\u names.map（（tag\u name，key）=>(


))}

)：null；
};
导出默认PublicationTags；

上面的代码没有隐藏返回行上的整个div.publication-tag，我添加了props.data.length，应该可以使用。

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;