JSX kontroluje widoczność tytułu na podstawie elementów zawartych w rekwizytach

Question

Mam komponent z wyświetlaną listą i tytułem.

Wiem, jak to zrobić za pomocą dwóch oddzielnych rekwizytów

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>)
    };
}

Jednak chcę to zrobić w taki sposób, aby widoczność opierała się na tym, czy w rekwizycie są listy takie jak:

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 >)
    };
}

Ta ostatnia nie działa, ale powinna wskazywać na to, czego szukam.

reactjs styling

1

Matas Vaitkevicius 19 marzec 2020, 11:59

Answer 1

Aby to zadziałało, możesz zrobić coś takiego:

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 >
      )
  };
}

Jeśli używasz ES6, zdecydowanie polecam skorzystanie z niszczenie obiektów, możesz sprawdzić, jak to wygląda na poniższym przykładzie:

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 >
    )
  };
}

2

Guilherme Toti 19 marzec 2020, 09:06

Answer 2

Styl akceptuje obiekt, spróbuj:

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 >)
    };
}

2

Vishnu 19 marzec 2020, 09:04

JSX kontroluje widoczność tytułu na podstawie elementów zawartych w rekwizytach

2 odpowiedzi

Podobne pytania

Nowe pytania

reactjs