Question

我正在学习React，但我认为我没有正确掌握所有内容。我只是在尝试创建数据表，但我不知道如何设置它。

我已经设置了两个组件。一个用于表，一个用于行。据我了解，我应该有一个用于容器的组件和另一个用于表示的组件。表示组件应该是无状态的。我这样做正确吗？

class ScheduledTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sales: [],
            theAction: "Pause",
            liveActive: true,
            upcomingActive: false,
            completedActive: false
        };
        this.handleClick = this.handleClick.bind(this);
    }

    componentWillMount() {
        this.setState({
            sales: this.props.active_sales,
            theAction: "Pause"
        });
    }

    handleClick(e) {
        if (e.target.id == "live") {
            console.log("clicked Live");
            this.setState({
                sales: this.props.active_sales,
                theAction: "Pause",
                liveActive: true,
                upcomingActive: false,
                completedActive: false
            });

        } else if (e.target.id == "upcoming") {
            console.log("clicked upcoming");
            this.setState({
                sales: this.props.scheduled_sales,
                theAction: "Start Now",
                liveActive: false,
                upcomingActive: true,
                completedActive: false
            });
        } else {
            console.log("clicked completed");
            this.setState({
                sales: this.props.completed_sales,
                theAction: "Duplicate",
                liveActive: false,
                upcomingActive: false,
                completedActive: true
            });
        }
    }

  render() {
        const latestAction = this.state.theAction;

        const header = (
            <tr>
                <th>Name</th>
                <th>Discount</th>
                <th>Start Time</th>
                <th>End Time</th>
                <th>Cents Modification</th>
                <th>View/Edit</th>
                <th>Action</th>
                <th>Cancel</th>
            </tr>
        );

        const rows = [];
        this.state.sales.map(function (sale) {
            if (sale[4]) {
                rows.push(<ScheduledTableRow key={sale[6]} name={sale[0]} discount={sale[1]} startTime={sale[2]} endTime={sale[3]} cMod={5} dType={sale[7]} action={latestAction} />);
            } else {
                rows.push(<ScheduledTableRow key={sale[6]} name={sale[0]} discount={sale[1]} startTime={sale[2]} endTime={sale[3]} cMod="N/A" dType={sale[7]} action={latestAction} />);
            }
        }, this
        );

    return (
            <table className="dataTable" id="scheduledSalesTable">
                <tbody>
                    <tr>
                        <th colSpan="12" className="filterRow">
                            <span className={this.state.liveActive ? 'filterCell activeUnderline': 'filterCell'} id="live" onClick={this.handleClick}>Live</span>
                            <span className={this.state.upcomingActive ? 'filterCell activeUnderline' : 'filterCell'} id="upcoming" onClick={this.handleClick}>Upcoming</span>
                            <span className={this.state.completedActive ? 'filterCell activeUnderline' : 'filterCell'} id="completed" onClick={this.handleClick}>Completed</span>
                        </th>
                    </tr>
                    {header}
                    {rows}
                </tbody>
            </table>);
    }
}

function ScheduledTableRow(props) {
    let discountType;
    if (props.dType == "percent") {
        discountType = props.discount + "%"
    } else {
        discountType = "$" + props.discount
    }

    return (
        <tr>
            <td>{props.name}</td>
            <td>{discountType}</td>
            <td>{props.startTime}</td>
            <td>{props.endTime}</td>
            <td>{props.cMod}</td>
            <td>View</td>
            <td><button type="button" className="btn btn-success goLiveButton">{props.action}</button></td>
            <td className="text-center"><i className="far fa-trash-alt trashBin"></i></td>
        </tr>
    )
}

我的ScheduledTable组件似乎很大。我应该做不同的事情吗？真的重要吗？

Answer 1

在做出反应时，没有确定的行事方式。一般的抽象是容器必须处理逻辑并应保持状态，其中表示性组件的状态应少一些，并且可用于在浏览器上呈现事物，即DOM元素和样式。对于您的情况，我会将表也设为“表示性组件”，并将页面或表中的组件用作“容器”。这里是good article by Dan Abramov大致相同。请记住，这不是唯一的做事方式，而是一种好方法。

反应组件结构所需的帮助

1 个答案: