如何在Reactjs中获取表

如何解决如何在Reactjs中获取表

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

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，同样的问题。另外，我不确定该函数是否可以正常工作，因此，如果有人也指出任何错误，将非常有帮助。

解决方法

您使用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>

,

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