需要React组件结构帮助

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。请记住，这不是唯一的做法，但这是一个好方法。