JSX управляет видимостью заголовка на основе элементов, содержащихся в подпорках - PullRequest
Новая
       38

JSX управляет видимостью заголовка на основе элементов, содержащихся в подпорках

1 голос
/ 19 марта 2020

У меня есть компонент, у которого есть список, который отображается, и заголовок.

Я знаю, как сделать это с двумя отдельными подпорками 

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

последний не работает, но должен указывать на то, что я ищу.

Ответы [ 2 ]

2 голосов
/ 19 марта 2020

Чтобы заставить его работать, вы можете сделать что-то вроде: 

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, я настоятельно рекомендую вам использовать уничтожение объектов , вы можете проверьте, как это выглядит в следующем примере: 

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 голосов
/ 19 марта 2020

Стиль принимает объект, попробуйте: 

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