javascript - 更改数组的 div 结构

Question

我在数组中有一个 HTML 结构。但是，我不确定如何根据 if 条件更改每个 div 结构，现在我正在重新创建四个 div，但我只想更改一个 div。有没有更简单的方法，比如单独更改第一个 div 内容？这是一个相关部分如下。

  var firstDay = "dayOne"
  if(firstDay){

    this.state = {
        'panes' : [

            <div className="sports-tab-content">
                <p className="sports-large-text ft-day1 ft-day2">
                  day one First
                </p>
            </div>,

            <div className="sports-tab-content">
                <p className="sports-large-text ft-day1 ft-day2">
                  light 
                </p>
            </div>,

            <div className="sports-tab-content">
                <p className="sports-large-text ft-day1 ft-day2 ft-day3">
                    bulb
                </p>
            </div>,

            <div className="sports-tab-content">
                <p className="sports-large-text ft-day1 ft-day2 ft-day3 ft-day4">
                  sky
                </p>
            </div>
        ]

    }
  }

  else {

    this.state = {
        'panes' : [

            <div className="sports-tab-content">
                <p className="sports-large-text ft-day1 ft-day2">
                  day one inside else
                </p>
            </div>,

            <div className="sports-tab-content">
                <p className="sports-large-text ft-day1 ft-day2">
                  jump

                </p>
            </div>,

            <div className="sports-tab-content">
                <p className="sports-large-text ft-day1 ft-day2 ft-day3">
                    drive 
                </p>
            </div>,

            <div className="sports-tab-content">
                <p className="sports-large-text ft-day1 ft-day2 ft-day3 ft-day4">
                  brush
                </p>
            </div>
        ]

    }

Answer 1

感觉display和state之间的抽象有点奇怪。我想存储指示哪些组件或组件应如何在状态中呈现的属性将使您更容易完成您想要做的事情。

代替:

this.state = {
  panes : [
    <div className="sports-tab-content">
      <p className="sports-large-text ft-day1 ft-day2">
        day one inside else
      </p>
    </div>,
    <div className="sports-tab-content">
      <p className="sports-large-text ft-day1 ft-day2">
        day one First
      </p>
    </div>,
    <div className="sports-tab-content">
      <p className="sports-large-text ft-day1 ft-day2 ft-day3">
        day one First 
      </p>
    </div>,
    <div className="sports-tab-content">
      <p className="sports-large-text ft-day1 ft-day2 ft-day3 ft-day4">
        day one First 
      </p>
    </div>,
  ],
};

可能使用:

this.state = {
  panes : [{
    classes: ['ft-day1', 'ft-day2'],
    text: 'day one inside else',
  }, {
    classes: ['ft-day1', 'ft-day2'],
    text: 'day one First',
  }, {
    classes: ['ft-day1', 'ft-day2', 'ft-day3'],
    text: 'day one First',
  }, {
    classes: ['ft-day1', 'ft-day2', 'ft-day3', 'ft-day4'],
    text: 'day one First',
  }],
};

render() {
  return (
    <Tabs selected={0} changeContent={this.changeContent}>
      <Pane label="Account Setup" subtitle="Days 1 and 2" liClass="sports-setup-ico first-time-active ft-active-tab">
        <PaneContent {...this.state.panes[0]} />
      </Pane>
      <Pane label="Investments Purchase" subtitle="Approx. Day 3" liClass="sports-invest-ico">
        <PaneContent {...this.state.panes[1]} />  
      </Pane>
      <Pane label="Balance and Portfolio" subtitle="Approx. Day 4" liClass="sports-balance-ico">
        <PaneContent {...this.state.panes[2]} />                  
      </Pane>
      <Pane label="IPerformance" subtitle="Approx. Day 5" liClass="sports-perf-ico">
        <PaneContent {...this.state.panes[3]} />
      </Pane>
    </Tabs>
  );
}

PanelContent 组件是:

const PanelContent = (props) => (
  <div className="sports-tab-content">
    <p className={`sports-large-text ${props.classes.join(' ')}`}>
      {props.text}
    </p>
  </div>
);