如何在 Reactjs 中获取表格

Question

我有一个带表的组件。 我想检查表的每一行的第一个元素是否等于当前工作日，然后打印出来，所以这就是我所做的

import React from 'react';

class Info extends React.Component {
    constructor(props) {
        super(props);
        this.checkDay = this.checkDay.bind(this);
    }

    checkDay() {
        let now = new Date();
        let myTab = document.getElementById('myTable');
        console.log(myTab);
        let days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
        let today = days[now.getDay()];
        for (let i = 0; i < myTab.rows.length; i++) {
            let content = myTab.rows.item(i).cells;
            if(content.item(0).innerHTML===today) {
                console.log(today);
            }
        }
    }

    
    render() {
        return (
        <div>
            <table className="table" id="myTable">
                    <tbody>
                        <tr>
                            <td>Monday</td>
                            <td>8:00 - 20:00</td>
                        </tr>
                        <tr>
                            <td>Tuesday</td>
                            <td>8:00 - 20:00</td>
                        </tr>
                        <tr>
                            <td>Wednesday</td>
                            <td>8:00 - 20:00</td>
                        </tr>
                        <tr>
                            <td>Thursday</td>
                            <td>8:00 - 20:00</td>
                        </tr>
                        <tr>
                            <td>Friday</td>
                            <td>8:00 - 20:00</td>
                        </tr>
                        <tr>
                            <td>Saturday</td>
                            <td>8:00 - 17:00</td>
                        </tr>
                        <tr>
                            <td>Sunday</td>
                            <td>closed</td>
                        </tr>
                    </tbody>
             </table>
             {this.checkDay()}
        </div>
        );
    }
  };
  
  export default Info; 

除非这不起作用，因为该表似乎是 NULL。 我也试过把那个 ID 给 tbody，同样的问题。 此外，我不确定该功能是否正常工作，因此如果有人也可以指出任何错误，那将非常有帮助。

Answer 1

您使用 React 的方式不正确，因此请查看文档和一些教程。

您可以创建一个函数来比较您的值等，并为每一行运行它（在我的示例中您应该返回一个值）：

checkDay(value) {
  // checking your value and then return a new value
  return value;
}

和行：

<tr>
    <td>{checkDay("Monday")}</td>
    <td>8:00 - 20:00</td>
</tr>

更优雅的是，您还可以创建包含日期信息的对象数组：

const week = [{day: "Monday", hours: "8:00 - 20:00"}, {day: "Tuesday", hours: "8:00 - 20:00"}] // and so on...

然后在代码中使用 map 函数：

<tbody>
{
    week.map((day, i) => {
     yourFunctionThatChecksDay(day);
    
     return <tr key={i}><td>{day.day}</td><td>{day.hours}</td></tr>
    }
}
</tbody>

Answer 2

你应该使用 react ref 来获取 DOM 元素的引用，查看官方文档： https : //reactjs.org/docs/refs-and-the-dom.html