Тройной внутри условного компонента не перерисовывается при смене реквизита

Question

Родитель условно рендерит компонент с уникальным реквизитом.Тройка внутри функции визуализации ребенка, получающего эти реквизиты, не работает должным образом.

Я использовал componentWillRecieveProps для setState и пытаюсь позволить троичной основе основываться на состоянии.И, после исследования, я изменил свой код для использования функции getDerivedStateFromProps (так как componentWillRecieveProps считается небезопасным?) Код выглядит следующим образом.

Кроме того, я знаю, что компонент получил реквизиты правильно, и это состояние обновляется до правильногозначение (из-за console.logs);

    class AppearTyping extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            underscore: '',
            header: true
        }
    }

    .
    .
    .

    static getDerivedStateFromProps(props, currentState) {
        if (currentState.header !== props.header) {
            return {
                header: props.header,
            }
        }
        return null
    }


    render() {
        let display = this.props.paragraph.join('');
        console.log(this.state.header);
        return (
            <div>
                {this.state.header ? <h2 className="about white">{display} 
    {this.state.underscore}</h2> : <p className="about white">{display}</p>}
            </div>
        )
    }
    }    

Если компонент получает prop: header = true, я хочу, чтобы {display} и {this.state.underscore} были обернуты в теги h2.В противном случае я хочу, чтобы компонент был обернут в теги p.

Answer 1

На самом деле не видя кода того, как вы используете компонент AppearTyping от родителя, не совсем ясно, какое неожиданное поведение вы видите, однако мне удалось заставить метод render переключаться между h2 и p с использованием троичного условного состояния.

Мой render метод выглядит следующим образом:

render () {
  let display = this.props.paragraph.join('')
  console.log(this.state.header)
  return (
    <div>
      {this.state.header ?
       <h2 className='about white'>{display} {this.state.underscore}</h2> :
       <p className='about white'>{display}</p> }
    </div>
  )
}

Вот это codesandbox который показывает код в действии .

Кстати, поскольку вы в основном включаете какой компонент использовать (h2 или p), знаете ли вычто вы могли бы также просто условно выбрать компонент на основе состояния?Это поможет вам убрать немного дублирования кода.

render () {
  let display = this.props.paragraph.join('')
  console.log(this.state.header)
  const WrapperComponent = this.state.header ? 'h2' : 'p'
  return (
    <div>
      <WrapperComponent className='about white'>
        {display}
        {this.state.header ? this.state.underscore : null }
      </WrapperComponent>
    </div>)
}

Answer 2

Попробуйте, это должно сработать, также это выглядит аккуратно и чисто.

render(){
 let display = this.props.paragraph.join('');
 console.log(this.state.header);
 const content = this.state.header ? 
              <h2 className="about white">
                   {display} 
                   {this.state.underscore}
              </h2> : 
               <p className="about white">
                   {display}
               </p>;
  return <div>
            {content}
         </div>;
}

старайтесь держать ваш return худым.