компонент функции реагирования внутри компонента класса, это допустимый компонент? В чем разница? - PullRequest
Новая
       1

компонент функции реагирования внутри компонента класса, это допустимый компонент? В чем разница?

1 голос
/ 20 февраля 2020

Я пытаюсь вернуть компонент функции после проверки условия в компоненте класса . Вот мой код: 

 class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.warn;
  }

   function WarningBanner() {
    if (this.state == false) {
      return null;
    }

    return (
      <div className="warning">
        Warning!
      </div>
    );
  } 
  render() {
    return (
      <div>
        <WarningBanner />
      </div>
    );
  }
}

ReactDOM.render(
  <Page warn={true}/>,
  document.getElementById('root')
);

Является ли компонентом функции внутри компонента класса считается действительным компонент ? Или есть другой способ определить компонент функции внутри компонента класса ?

В чем разница между компонентом функции внутри компонент класса или компонент функции вне компонента класса ?

Я также пытался сделать это: 

<WarningBanner warn = {this.state}/>

А 

function WarningBanner(warning) {
    if (warning.warn == false) {
      return null;
    }
    return (<div className="warning">Warning!</div>);
  }

Ответы [ 3 ]

1 голос
/ 20 февраля 2020

Вы можете сделать что-то вроде ... 

    class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.warn;
  }

  render() {
    return (
      <div>
        {this.props.warn && <div className="warning">Warning!</div>}
      </div>
    );
  }
}

ReactDOM.render(
  <Page warn={true}/>,
  document.getElementById('root')
);

Где {this.props.warn && <div className="warning">Warning!</div>} оценит, является ли условие истинным, и, если да, отобразит компонент.

Если вы хотите сделать более сложный функциональный компонент, я бы предложил создать его вне вашего компонента с состоянием, как это ... 

const Warning = () => {
  return (<div className="warning">Warning!</div>);
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.warn;
  }

  render() {
    return (
      <div>
        {this.props.warn && <Warning />}
      </div>
    );
  }
}

ReactDOM.render(
  <Page warn={true}/>,
  document.getElementById('root')
);

Я бы порекомендовал этот метод в соответствии с лучшими практиками React, поскольку за пределами codepen вы могли бы иметь разные файлы для разных компонентов.

Вот иллюстрация к перу: https://codepen.io/paulmartin91/pen/zYGKRNa

надеюсь, это поможет!

1 голос
/ 23 февраля 2020

Да, компоновка функции внутри компонента класса является действительной, и есть возможность совместно использовать состояние основного компонента, и они не отличаются в компонент функции и функциональный компонент внутри компонент класса как отдельный компонент. Проблема здесь полностью связана с javascript, а не с реакцией. Вот правильный код: 

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: props.warn};
    this.warning = this.WarningBanner.bind(this);
  }
  WarningBanner() {
    if (this.state.value == false) { 
      return null;
    }
    return (<div className="warning">Warning!</div>);
  }

  render() {
    return (<div>{this.warning()}</div>);
  }
}

ReactDOM.render( <Page warn={true}/>, document.getElementById('root'));

Задача 1: ключевое слово функции не может быть определено внутри класса javascript, поскольку сам класс должен действовать как функция.

Задача 2: Новые функции в классе javascript должны иметь привязку и доступ через переменную this.warning.

Надеюсь это кому-нибудь пригодится. Спасибо.

0 голосов
/ 20 февраля 2020

Я не думаю, что определение компонентов, подобных этому, является идиоматическим c.

Данные могут быть разделены между компонентами с помощью свойств.

Вы можете показать или скрыть баннер, используя условие (здесь я использую оператор &&) в вашем Page компоненте так: 

function WarningBanner({message}) {
    return (<div className="warning">Warning!</div>)
} 

class Page extends React.Component {
  render() {
    return (
      <div>
        { this.props.showWarning && <WarningBanner /> }
      </div>
    )
  }
}

ReactDOM.render(
    <Page showWarning={true} />,
    document.getElementById('root')
)
* {
  font-family: sans-serif;
  margin: 0;
}
button {
  height: 40px;
  width: 200px;
}
.warning {
  background-color: red;
  text-align: center;
  width: 100%;
  padding: 10px;

  font-size: 14pt;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
...