反应。如何设置占位符,直到组件列表将被完全加载?

时间:2018-04-25 15:35:28

标签: javascript reactjs load

所以我有Component呈现嵌套组件Cri的列表,我的目标是在屏幕上显示一些占位符,直到Cri组件列表完全加载屏幕上。

任何建议?

class Comp extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoaded: true
    }
  }
  _func = () => {
    const lis = [];
    const { att, cri, media, res, st } = this.props;
    cri &&
      cri.map((row, i) => {
        var state = !row.available ? 'locked' : ''
        if (att.inProgress === false && att.itemId === row.cr && st) {
          var show = true
          state = result || state
        }
        lis.push(
          <Cri // my list of the Components Cri
            {...row}
            action={this._atte(row.cri, row.available)}
            key={i}
            mediaType={medpe}
            showOutcome={showe}
            state={state}
          />
        )
      })
    return lis
  }
  render() {
    const { isLoaded } = this.state;
    return (
      <div className="main-container">
        <div className="sub-list">
          <div>
            {this._buildCrimesList()}
          </div>
        </div>
      </div>
    )
  }
}

1 个答案:

答案 0 :(得分:0)

你可以这样做:

Apr 25, 2018 9:24:16 PM org.openqa.selenium.phantomjs.PhantomJSDriverService <init>
INFO: executable: C:\Utility\phantomjs-2.1.1-windows\bin\phantomjs.exe
Apr 25, 2018 9:24:16 PM org.openqa.selenium.phantomjs.PhantomJSDriverService <init>
INFO: port: 25078
Apr 25, 2018 9:24:16 PM org.openqa.selenium.phantomjs.PhantomJSDriverService <init>
INFO: arguments: [--webdriver=25078, --webdriver-logfile=C:\Users\AtechM_03\LearnAutmation\Java_PhantomJS\phantomjsdriver.log]
Apr 25, 2018 9:24:16 PM org.openqa.selenium.phantomjs.PhantomJSDriverService <init>
INFO: environment: {}
[INFO  - 2018-04-25T15:54:19.809Z] GhostDriver - Main - running on port 25078
[INFO  - 2018-04-25T15:54:20.263Z] Session [ea9746f0-48a0-11e8-8b6b-f78193ae50b0] - page.settings - {"XSSAuditingEnabled":false,"javascriptCanCloseWindows":true,"javascriptCanOpenWindows":true,"javascriptEnabled":true,"loadImages":true,"localToRemoteUrlAccessEnabled":false,"userAgent":"Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1","webSecurityEnabled":true}
[INFO  - 2018-04-25T15:54:20.263Z] Session [ea9746f0-48a0-11e8-8b6b-f78193ae50b0] - page.customHeaders:  - {}
[INFO  - 2018-04-25T15:54:20.263Z] Session [ea9746f0-48a0-11e8-8b6b-f78193ae50b0] - Session.negotiatedCapabilities - {"browserName":"phantomjs","version":"2.1.1","driverName":"ghostdriver","driverVersion":"1.2.0","platform":"windows-8-32bit","javascriptEnabled":true,"takesScreenshot":true,"handlesAlerts":false,"databaseEnabled":false,"locationContextEnabled":false,"applicationCacheEnabled":false,"browserConnectionEnabled":false,"cssSelectorsEnabled":true,"webStorageEnabled":false,"rotatable":false,"acceptSslCerts":false,"nativeEvents":true,"proxy":{"proxyType":"direct"}}
[INFO  - 2018-04-25T15:54:20.264Z] SessionManagerReqHand - _postNewSessionCommand - New Session Created: ea9746f0-48a0-11e8-8b6b-f78193ae50b0
Apr 25, 2018 9:24:20 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
Google
[INFO  - 2018-04-25T15:54:22.023Z] ShutdownReqHand - _handle - About to shutdown