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工具中，状态历史记录很正常。唯一的问题是条件条件不会将元素隐藏在错误状态。

更新。之所以进行这种奇怪的渲染，是因为同一组件中的动态循环渲染了另一个组件，而与标志值无关。很难确定的是，它是在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>

单击切换，将显示数据。

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

1 个答案: