0

我是新手ReactJS，我正在尝试找到将props父组件的 a 与子组件中的普通字符串混合的正确方法URL 我的子组件中有两个道具：

this.props.originalUrl =  https://server.com
this.props.todayDate = "2018-08-16"

我有一个网址可以说是

let url = https://server.com/123/2018-08-16/blabla

我想要的是让它像动态网址一样

let url = `${this.props.originalUrl }/123/${this.props.todayDate }/blabla`

但是当我使用

 let url = `${this.props.originalUrl }/123/2018-08-16/blabla`

控制台为我提供了我想要的正确 URL

  https://server.com/123/2018-08-16/blabla

但是有两个这样的道具

  let url = `${this.props.originalUrl }/123/${this.props.todayDate}/blabla`

控制台给我 https://server.com/123//blabla 没有日期

我目前如何混合它们？注意：当我在子组件返回中使用 {this.props.todayDate} 时，它看起来很有效并呈现为 2018-08-16

这是完整的代码

import React, { Component } from 'react';
import { extend } from 'underscore';
import { translate, Trans} from 'react-i18next';
import axios from 'axios';
import { Alert } from 'react-alert'

import TableNav from './tableNav';
import Table from './table';

class TableContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      sortBy: 'id',
      filteredData: [],
      checkedboxArray: [],
      sortingOptions: [
        'id'],
      sortingDirection: {
        'id': true, 
      },
      data: [],
      itemsPerPage: 20,
      totalPages: '',
      firstUrl: '',  
      previousUrl: '',
      currentUrl: '',
      nextUrl: '',
      lastUrl: '',
      totalItems:'',
      currentPageNumber: '',
      originalurl: `${this.props.cmsUrl}performances?eq(flyers.id,empty())&gte(startDateTime,${this.props.todayDate})&sort(+startDateTime)`,
      performancesSelected: [],
      myItemsState: true
    };

    let url = this.state.originalurl;
    axios.get(url, { withCredentials: true })
    .then((response) => {
      this.setState({
        totalPages:response.data.pagination.pages,
        totalItems:response.data.pagination.total,
        currentPageNumber: response.data.pagination.page,
        firstUrl:response.data.pagination.links.first,
        previousUrl:response.data.pagination.links.previous,
        currentUrl:response.data.pagination.links.current,
        nextUrl:response.data.pagination.links.next,
        lastUrl:response.data.pagination.links.last,
        data:response.data.results,
      });
    });

    this.getTotal = this.getTotal.bind(this);
    this.onSelectChange = this.onSelectChange.bind(this);
    this.onColumnClick = this.onColumnClick.bind(this);
    this.filterData = this.filterData.bind(this);
    this.sortData = this.sortData.bind(this);
    this.checkedbox = this.checkedbox.bind(this);
    this.nextPageFunc = this.nextPageFunc.bind(this);
    this.previousPageFunc = this.previousPageFunc.bind(this);
    this.firstpageFunc = this.firstpageFunc.bind(this);
    this.lastpageFunc = this.lastpageFunc.bind(this);

  }

  getTotal() {
    return this.state.data.length;
  }

  onSelectChange(e, option) {
    if (option === 'sortBy') {
      this.setState({ sortBy: e.target.value });
      this.sortData(e.target.value, this.state.sortBy);
      this.setState({ currentPage: 1});
    } else {
      this.setState({ itemsPerPage: e.target.value });
      this.setState({ currentPage: 1});
    }
  }

  onColumnClick(e) {
    var clicked = e.target.getAttribute('class');
    this.setState({ sortBy: clicked });
    this.sortData(clicked, this.state.sortBy);
  }

  filterData() {
    return this.state.data;
  }

  sortData(sortBy, previousSortBy) {
    sortBy = sortBy.toLowerCase().replace(' ', '');
    previousSortBy = previousSortBy.toLowerCase().replace(' ', '');
    var ascending = this.state.sortingDirection[sortBy];

    if (sortBy === previousSortBy) {
      ascending = !ascending;
      this.setState({ sortingDirection: extend(this.state.sortingDirection, { [sortBy]: ascending }) });
    }
    var data = this.state.data.sort(function(a, b) {
      if(a[sortBy] < b[sortBy]) {
        return ascending ? -1 : 1;
      }
      if(a[sortBy] > b[sortBy]) {
        return ascending ? 1 : -1;
      }
      return 0;
    });
    this.setState({ data })
  }

  checkedbox(id){
    let checkedboxArray = this.state.checkedboxArray;

    let flyersAraay = this.state.data;
    let performancesSelected = this.state.performancesSelected;

    // if Selected ID are not in the checkedboxArray
    if ( checkedboxArray.indexOf(id) === -1 ) { 
        checkedboxArray.push(id) ; 
        this.setState({checkedboxArray: checkedboxArray })

        let selecObject = flyersAraay.find(function (xxx) { return xxx.id === id; });
        performancesSelected.push(selecObject)

        let data = JSON.stringify(performancesSelected)
        sessionStorage.setItem( "Performances" , data)
      }
    // if Selected ID are in the checkedboxArray
    else if ( checkedboxArray.indexOf(id) !== -1 ) {
      let i = checkedboxArray.indexOf(id);
      if (i !== -1) {
        checkedboxArray.splice(i, 1);
        performancesSelected.splice(i, 1);
        this.setState({checkedboxArray: checkedboxArray })

        let data = JSON.stringify(performancesSelected)
        sessionStorage.setItem( "Performances" , data)
      }
    }
  }

  nextPageFunc() {
    let StrUrl = JSON.stringify(this.state.nextUrl);
    let smallUrl = StrUrl.split("external/").pop();
    let editeUrl = this.props.cmsUrl + smallUrl;
    let url = editeUrl;

    axios.get(url, { withCredentials: true })
    .then((response) => {
      this.setState({
        totalPages: response.data.pagination.pages,
        totalItems: response.data.pagination.total,
        currentPageNumber: response.data.pagination.page,
        firstUrl: response.data.pagination.links.first,
        previousUrl: response.data.pagination.links.previous,
        currentUrl: response.data.pagination.links.current,
        nextUrl: response.data.pagination.links.next,
        lastUrl: response.data.pagination.links.last,
        data: response.data.results,
      });
    });
  }

  previousPageFunc() {
    let StrUrl = JSON.stringify(this.state.previousUrl);
    let restUrl = StrUrl.split("external/").pop();
    let editeUrl = this.props.cmsUrl + restUrl;

    let url = editeUrl;
    axios.get(url, { withCredentials: true })
    .then((response) => {
      this.setState({
        totalPages: response.data.pagination.pages,
        totalItems: response.data.pagination.total,
        currentPageNumber: response.data.pagination.page,
        firstUrl: response.data.pagination.links.first,
        previousUrl: response.data.pagination.links.previous,
        currentUrl: response.data.pagination.links.current,
        nextUrl: response.data.pagination.links.next,
        lastUrl: response.data.pagination.links.last,
        data: response.data.results,
      });
    });
  }

  firstpageFunc() {
    let StrUrl = JSON.stringify(this.state.firstUrl);
    let restUrl = StrUrl.split("external/").pop();
    let editeUrl = this.props.cmsUrl + restUrl;

    let url = editeUrl;
    axios.get(url, { withCredentials: true })
    .then((response) => {
      this.setState({
        totalPages: response.data.pagination.pages,
        totalItems: response.data.pagination.total,
        currentPageNumber: response.data.pagination.page,
        firstUrl: response.data.pagination.links.first,
        previousUrl: response.data.pagination.links.previous,
        currentUrl: response.data.pagination.links.current,
        nextUrl: response.data.pagination.links.next,
        lastUrl: response.data.pagination.links.last,
        data: response.data.results,
      });
    });
  }

  lastpageFunc() {
    let StrUrl = JSON.stringify(this.state.lastUrl);
    let smallUrl = StrUrl.split("external/").pop();
    let editeUrl = this.props.cmsUrl + smallUrl;

    let url = editeUrl;
    axios.get(url, { withCredentials: true })
    .then((response) => {
      this.setState({
        totalPages: response.data.pagination.pages,
        totalItems: response.data.pagination.total,
        currentPageNumber: response.data.pagination.page,
        firstUrl: response.data.pagination.links.first,
        previousUrl: response.data.pagination.links.previous,
        currentUrl: response.data.pagination.links.current,
        nextUrl: response.data.pagination.links.next,
        lastUrl: response.data.pagination.links.last,
        data: response.data.results,
      });
    });
  }

  myItemsCheckbox(e) {
    let state = this.state.myItemsState
    if ( state === false ) {
        axios.get( `${this.props.cmsUrl}performances?eq(flyers.id,empty())&gte(startDateTime,2018-08-16)&sort(+startDateTime)`, { withCredentials: true })
      .then((response) => {
        this.setState({
          totalPages:response.data.pagination.pages,
          totalItems:response.data.pagination.total,
          currentPageNumber: response.data.pagination.page,
          firstUrl:response.data.pagination.links.first,
          previousUrl:response.data.pagination.links.previous,
          currentUrl:response.data.pagination.links.current,
          nextUrl:response.data.pagination.links.next,
          lastUrl:response.data.pagination.links.last,
          data:response.data.results,
        });
      });
      this.setState({ myItemsState: true})
    }
    else if ( state === true ) {
      axios.get( this.props.cmsUrl+"performances", { withCredentials: true })
      .then((response) => {
        this.setState({
          totalPages:response.data.pagination.pages,
          totalItems:response.data.pagination.total,
          currentPageNumber: response.data.pagination.page,
          firstUrl:response.data.pagination.links.first,
          previousUrl:response.data.pagination.links.previous,
          currentUrl:response.data.pagination.links.current,
          nextUrl:response.data.pagination.links.next,
          lastUrl:response.data.pagination.links.last,
          data:response.data.results,
        });
      });
      this.setState({ myItemsState: false })
    }
  }

render() {
    const { itemsPerPage, totalPages, data, currentPageNumber, totalItems, firstUrl, previousUrl, currentUrl, nextUrl, lastUrl, checkedboxArray  } = this.state;

    return (
      <div>
        <div className="myItemsButton">
          <Alert>{ alert => ( 
            <span className="btn myItemsSpan ">
              <input 
                className="inputSelect" 
                defaultChecked={this.state.myItemsState} 
                onChange={ () => { { alert.show('You have changed the Items order' )} ; this.myItemsCheckbox() } }  
                type="checkbox" 
                id="xd" 
                name="cc" 
              />
              <label htmlFor="xd"><span></span></label>
              myItems
            </span>
          )}
          </Alert>
        </div>
        <TableNav
          itemsPerPage={itemsPerPage}
          totalPages={totalPages}
          data={data}
          currentPageNumber={currentPageNumber}
          totalItems={totalItems}
          firstpageFunc={this.firstpageFunc}
          previousPageFunc={this.previousPageFunc}
          nextPageFunc={this.nextPageFunc}
          lastpageFunc={this.lastpageFunc}
          firstUrl={firstUrl}
          previousUrl={previousUrl}
          currentUrl={currentUrl}
          nextUrl={nextUrl}
          lastUrl={lastUrl} />
        <Table
          onColumnClick={this.onColumnClick}
          checkedbox={this.checkedbox}
          data={data}
          checkedboxArray={checkedboxArray}
          filteredData={this.filterData()} />

        { this.state.data.length === 0 && (
          <table className="table noResultsTable bordered table-hover table-dark">
            <tbody>
              <tr>
                <td>
                  <div className="col-12 text-center noResults">
                    {/* <i className="fas fa-cog"></i> */}
                    <i className="fa fa-exclamation-triangle"></i>
                    <span className="resultsText"><Trans>No results found</Trans> {this.props.todayDate} ...</span>
                  </div>
                </td> 
              </tr>
            </tbody>
          </table>
        )}
      </div>
    );
  }
}

export default translate('translations')(TableContainer);

最后<span className="resultsText">我可以把时间读成

4

0 回答 0