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

感觉就像显示和状态之间的抽象有点奇怪。我想，存储属性可以指示哪些组件或组件应该如何在状态中呈现，这样可以更轻松地完成您要执行的操作。

而不是：

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>
);

改变数组的div结构

1 个答案: