JSX 根据 props 中包含的元素控制标题的可见性

Question

我有一个组件，它有一个正在显示的列表和一个标题。

我知道如何使用两个独立的道具来做到这一点

class ListsInBatch extends Component {
    render() {
        return (<div><div styles={this.props.Visibility}>Lists ready for batch processing</div><div id="listsInBatch">{this.props.Lists}</div></div>)
    };
}

但是，我想以这样一种方式来做到这一点，即可见性将基于道具中是否有列表，例如：

class ListsInBatch extends Component {
    render() {
        return (<div><div styles="display : { return (this.props.Lists.length > 0 ? "block" : "none")}">Lists ready for batch processing</div> <div id="listsInBatch">{this.props.Lists}</div></div >)
    };
}

后者不起作用，但应该能找到我要找的东西。

Answer 1

样式接受一个对象，试试：

class ListsInBatch extends Component {
    render() {
        return (<div><div style={{display: this.props.Lists.length > 0 ? "block" : "none"}}>Lists ready for batch processing</div> <div id="listsInBatch">{this.props.Lists}</div></div >)
    };
}

Answer 2

为了使其正常工作，您可以执行以下操作：

class ListsInBatch extends Component {
  render() {
      return (
        <div>
          <div style={{ display: this.props.Lists.length > 0 ? "block" : "none" }}>
            Lists ready for batch processing
          </div>
          <div id="listsInBatch">{this.props.Lists}</div>
        </div >
      )
  };
}

如果您使用的是 ES6，我强烈建议您使用 object destructuring，您可以在下面的示例中查看它的外观：

class ListsInBatch extends Component {
  render() {
    const { Lists } = this.props

    return (
      <div>
        <div style={{ display: Lists.length > 0 ? "block" : "none" }}>
          Lists ready for batch processing
        </div>
        <div id="listsInBatch">{Lists}</div>
      </div >
    )
  };
}

JSX 根据 props 中包含的元素控制标题的可见性

JSX control visibility of title based on elements contained in props

styling

reactjs