javascript - 为什么没有显示详细 View ？

Question

我的 Index.tsx 中有此代码当前显示 Actors 列表的文件.我想通过点击 Detail 来显示 Actor 的详细信息按钮，但我的问题是详细 View 没有显示。有人可以帮忙吗？:

<td>
   <button className="action" onClick={(id) => this.handleDetails(item.Id)}>Detail</button>
</td>

调用这个方法:

handleDetails(id: number) {
    this.renderPopUp();
}

调用这个方法:

private renderPopUp() {
    return <Details id={this.state.activeId} />;
}

并且已经导入了这个:

import * as React from 'react'
import {RouteComponentProps} from 'react-router'
import * as models from "../../models"
import * as Modal from 'react-modal'
import { Details } from './Details'

最后这是我的 Details.tsx文件:

import * as React from 'react'
import { RouteComponentProps } from 'react-router'
import * as models from "../../models"

interface IDetailsState {
    actor: models.Actor;
    loading: boolean,
}

interface IDetailsProps {
    id: number
}

export class Details extends React.Component<IDetailsProps, IDetailsState> {
    constructor(props) {
        super(props);
        this.state = {
            actor: null,
            loading: true
        };
         alert('Hi');//This is not showing
        fetch('api/actors/get/' + this.props.id)
            .then(response => response.json() as Promise<models.Actor>)
            .then(data => {
                this.setState({
                    actor: data,
                    loading: false
                });
            });
    }

    public render() {
        alert('HelloAgain');
        let contents = this.state.loading
            ? <p><em>Loading...</em>
              </p>
            : this.renderDetails(this.state.actor);
        return <div>
                   <h1>Actor Details</h1>
                   {contents}
               </div>;
    }

    private renderDetails(item: models.Actor) {
        return <div className='details'>
                   <label>Id</label>
                   <div>item.Id</div>
                   <label>Name</label>
                   <div>item.Name</div>
                   <label>Gender</label>
                   <div>item.Gender</div>
                   <label>Age</label>
                   <div>item.Age</div>
                   <label>Picture</label>
                   <div>item.Picture</div>
               </div>;
    }
}

主要问题是return <Details id={this.state.activeId} />;不调用 Details.tsx我想知道为什么？我添加了一个警报，alert('Hi');以上fetch它也没有显示。

Answer 1

终于找到问题了。您实际上并没有呈现 Details 组件。它只是被返回。这就是它没有被渲染的原因。应更改按钮的单击状态，并使用 Details 重新呈现组件。然后，它将起作用。在 index.tsx

中尝试以下代码

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Details }  from './details';

interface State {
   id: number;
   renderDetails: boolean;
}

export class Index extends React.Component<any, State> {

constructor(props: any, state: State){
    super(props, state);
    this.state ={
        id: 0,
        renderDetails: false
    }
}
public render() {
    let details = this.state.renderDetails ? <Details id={this.state.id}/> : null;
    return (
        <div>
            <td>
                <button className="action" onClick={this.handleDetails.bind(this, 1)}>Detail</button>
            </td>
            {details}
        </div>
    );
}

private handleDetails(id: number){
    this.setState({
        id: id,
        renderDetails: true
    })

}
}