Question

    File "demi.py", line 5, in <module>
    content = json.loads(f.read())
    File "/usr/lib/python3.4/json/__init__.py", line 318, in loads
    return _default_decoder.decode(s)
    File "/usr/lib/python3.4/json/decoder.py", line 346, in decode
raise ValueError(errmsg("Extra data", s, end, len(s)))

我想提供条件和if条件并使用该条件我想打开一个特定的页面，如代码片段中所示。但是当我运行时根本没有输出。我只是想在通知类型的基础上做相似的页面打开点击该表格行

Answer 1

您可以使用this.context.router.push动态更改表格行的路由onClick。请参阅以下代码段。

import React, { Component } from 'react';
import { Link } from 'react-router'
import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap';

class Notifications extends Component {
  constructor(){
    super();
    this.state = {
            data:[
                {title:"Nikko Laus1" , text:"abcd" , type:"Big text" },
                {title:"Sam Collins", text:"" ,type:"Inbox style"},
                {title:"Sam ", text:"" ,type:"Image style"}   
            ]
        };
  }
  static contextTypes = {
    router: React.PropTypes.object
  }
  handleClick = (index) => {

      if(this.state.data[index].type === "Big text") {
          this.context.router.push('/Components/BigText');
      } else if(this.state.data[index].type === "Image style") {
          this.context.router.push('/Components/ImageStyle');
      } else {
          this.context.router.push('/Components/InboxStyle');
      }

  }
  render() {
    let rows = this.state.data.map((person, index) =>
        {
            return <TableRow key={person.id} data={person} onClick={this.handleClick.bind(this, index)}/>
        });
    return (<div><div>
          <div className="animated fadeIn">
           <div className="px-2 mb-1">
                <Link to={'/Components/BasicNotification'} style= {{ width:20 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Add Notification</Link>

                  </div>

            <br /><div className="card" style={{ width: 57 + '%' }}>
              <div className="card-header">
                 Manage Notifications
              </div>
              <div className="card-block">


      <table  className="table table-hover table-outline mb-0 hidden-sm-down">

                <tbody>

                 {rows}</tbody>
            </table></div>


<br />

            </div>
          </div><div className="px-2 mb-1"><Link to={'/components/tabs'} style={{ width:20 + '%' }} className="px-1 nav-link btn btn-block btn-success" activeClassName="active">Filter Notifications</Link>
</div>
</div></div>




    )
  }
}

class TableRow extends React.Component
{
    constructor(props)
    {
        super(props);
    }

    render()
    {
        return (<tr onClick={this.props.onClick}>
                    <td className="text-center">{this.props.data.title}<br />
                    {this.props.data.text}<br /></td></tr>

            );
    }
}


export default Notifications;

React js导航表格行

1 个答案: