Question

在我返回此文件时，我希望每当触发onChange时，将“ subtitle”中的标题元素更改为与下拉菜单中的元素相同的元素。我应该如何修改此代码？

return (
    <Card
      classname="WeeklyTrafficCard"
      icon={<span><i className="icon-user"/></span>}
      title={<h3>Weekly Traffic Analytics</h3>}
      subtitle={<h5 className="font-light text-muted">Modify This Part, I want it to be each_daterange whenever each_daterange changes</h5>}
    >
      <div className="weekly">
        <div className="weekly-head p-4 text-center">
          <select className="py-2 px-3" onChange={(event)=>setMyVar(event.target.value)}>
            {dateArray.map(each_daterange => (
                <option key={each_daterange} value={each_daterange} >
                  {each_daterange}
                </option>
            ))}
          </select>
        </div>
        <div className="viz px-16">
          {data && data.length > 0 && (
            <canvas width="400" height="400" id="weekly-traffic-chart"></canvas>
          )}
        </div>
      </div>
    </Card>
  )

Answer 1

我认为您已经在使用useState挂钩。（setMyVar）您可以将myVar放在字幕中，并且当myVar更改时，组件将重新呈现。

<Card
  ...
  subtitle={<h5 className="font-light text-muted">{myVar}</h5>}
>
   {...}
</Card>

Answer 2

您可以使用JavaScript es6 template literals。

subtitle={`<h5 className="font-light text-muted">${myVar}</h5>`}

反应：如何使一个元素随其子元素的变化对变化做出反应？

2 个答案: