reactjs - 根据 React Web 应用程序中的状态呈现 if 语句

问题描述

我正在尝试根据当前状态呈现包含不同文本的跨度。

我认为这应该很简单，但事实并非如此......

我有四个变量：

const stNumbers = [1, 21, 31]
const ndNumbers = [2, 22]
const rdNumbers = [3, 23]
const thNumbers = [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 24, 25, 26, 27, 28, 29, 30]

其中每一个都是从 1 到 31 的数字数组。它们所在的数组取决于它们在日期中的显示方式，即 1 日、2 日、3 日、4 日等。

然后我有一个函数，该函数根据状态是否与上述数组中的任何值匹配而呈现一个跨度。

const numbersCheck = () => {
      if (stNumbers.includes(this.state.paymentDate)) {
        return <span>st</span>
      } else if (ndNumbers.includes(this.state.paymentDate)) {
        return <span>nd</span>
      } else if (rdNumbers.includes(this.state.paymentDate)) {
        return <span>rd</span>
      } else if (thNumbers.includes(this.state.paymentDate)) {
        return <span>th</span>
      } else {
        return <span></span>
      }
    }

这调用“包含”来检查每个数组并确定它应该呈现哪个跨度。

然后我想在我的组件中呈现这个函数，而不是它们只是一个数字，即 3、9、12、24 或任何其他示例，而是表示第 3、第 9、第 12、第 24。

输入设置文本输入时的状态。

我正在尝试这样做：

<div className="link-debt-input-container">
              <input className="link-debt-number-input" list="date-list" name="paymentDate" value={this.state.paymentDate} onChange={this.onChange} />
                <datalist id="date-list">
                  <option value="1" />
                  <option value="2" />
                  <option value="3" />
                  <option value="4" />
                  <option value="5" />
                  <option value="6" />
                  <option value="7" />
                  <option value="8" />
                  <option value="9" />
                  <option value="10" />
                  <option value="11" />
                  <option value="12" />
                  <option value="13" />
                  <option value="14" />
                  <option value="15" />
                  <option value="16" />
                  <option value="17" />
                  <option value="18" />
                  <option value="19" />
                  <option value="20" />
                  <option value="21" />
                  <option value="22" />
                  <option value="23" />
                  <option value="24" />
                  <option value="25" />
                  <option value="26" />
                  <option value="27" />
                  <option value="28" />
                  <option value="29" />
                  <option value="30" />
                  <option value="31" />
                </datalist>
              { numbersCheck }
            </div>

每次我尝试渲染我的页面时，我都会收到以下错误：

警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。

我不明白这是怎么发生的，因为我在“numbersCheck”函数中返回跨度？

谁能指出我哪里出错了？

标签： reactjs

reactjs - 根据 React Web 应用程序中的状态呈现 if 语句

问题描述

解决方案

推荐阅读