JSX中的条件渲染不会隐藏元素

Question

所以我有这个React组件，其中在某些部分包含条件渲染。 到目前为止，一切都很好，这种做法在我的整个应用程序中都按预期运行。
但令人惊讶的是，我们所讨论的元素并未因条件变化而被隐藏。

让我为您提供相关代码的最小表示，因为原始组件太长且繁琐。

import React from 'react';
import AnotherComponent from '../components/AnotherComponent';

export class TheComponent extends Component {
  /* 
    1. props.data is coming from mapping component state to redux connect
    2. connect file and selectors are alright, because other parts of this component
       work as expected, and even same props.data is used elsewhere in the component
    3. a method wihtout input as in showAnotherComponent = () => false; will hide the 
       AnotherComponent element successfully. but even sth like 
       showAnotherComponent = (data) => false; will not work!!!
    4. props.data is properly injected to the render method, console.log(props.data)  in reder 
       method will display updated value.
    5. props.data is never null or undefined and so on ..
  */
  showAnotherComponent = data => data.flag === 'AAA';

  render() {
    console.log(this.props.data); // will show the updated props.data

    return (
      <div className="row">
        <div className="col-md-10">
          <h1>Some heading</h1>
        </div>
        <div className="col-md-2">
          {/* the element in next line will always show up invariably, whatever the
          content of props.data. tried ternary, same result. */}
          {this.showAnotherComponent(this.props.data) && <AnotherComponent />}
        </div>
      </div>
    );
  }
}

export default TheComponent;

不幸的是，考虑到所有第三方的依赖关系和redux接线，创建一个可以正常工作的样本有点困难。

但是，如果您遇到过类似情况并陷入困境，请与我分享您的经验。

注意：更新后的props.data通常会传递给组件。 在react dev工具中显示出来，在redux dev工具中，状态历史记录很正常。 这里唯一的问题是条件条件不会将元素隐藏在错误状态。

UPDATE。 之所以进行这种奇怪的渲染，是因为同一组件中的动态循环渲染了另一个组件，而与标志值无关。 很难确定的是，它是在map中渲染它并传递动态字符串内容的索引。 无论如何，谢谢大家，对于可能引起误解的问题深表歉意。

Answer 1

这里工作正常。

您应该检查道具中的数据，是否有任何flag键，是否有flag键检查是否为AAA 。

 class App extends React.Component { constructor() { super(); this.state = { data: "aa" }; } /* 1. props.data is coming from mapping component state to redux connect 2. connect file and selectors are alright, because other parts of this component work as expected, and even same props.data is used elsewhere in the component 3. a method wihtout input as in showAnotherComponent = () => false; will hide the AnotherComponent element successfully. but even sth like showAnotherComponent = (data) => false; will not work!!! 4. props.data is properly injected to the render method, console.log(props.data) in reder method will display updated value. 5. props.data is never null or undefined and so on .. */ showAnotherComponent = data => data.flag === "AAA"; render() { console.log(this.props.data); // will show the updated props.data return ( <div className="row"> <div className="col-md-10"> <h1>Some heading</h1> </div> <div className="col-md-2"> {/* the element in next line will always show up invariably, whatever the content of props.data. tried ternary, same result. */} {this.showAnotherComponent({ flag: this.state.data }) && ( <div>asdsdasd</div> )} </div> <button onClick={() => this.setState({ data: "AAA" })}>Toggle</button> </div> ); } } ReactDOM.render(<App />, document.body); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

单击切换，将显示数据。