Реакция: Как сделать условные проверки из метода render () в функциональных Компонентах?

Question

В моем обычном компоненте класса React я выполнил некоторые проверки в методе render () перед возвратом условного рендеринга html.Теперь я использовал функциональный компонент реагирования, который, по-видимому, не имеет метода render () ... как бы я здесь сделал условные проверки?Просто внутри нормальных функций, а затем вернуть HTML-код из этих функций?

например, Компонент класса:

render() {
let test;
if (this.state.test ===true) {
    test = (
    <p>This is a test</p>
    )
}

return(
    {test}
)
}

в функциональных компонентах?:

        return (            
            <p >
                {checkIcon()} //normal Javascript functions?
            </p>
        )

Answer 1

Как утверждают другие, вы можете делать что-либо внутри функции рендеринга, то же самое, что вы можете делать с компонентом класса. Вы можете думать о своих функциональных компонентах как о функциях рендеринга ваших классовых ...

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

Возможно, вы захотите взглянуть на перенимать , откуда мой пример черпает вдохновение. (измените атрибут test и нажмите фрагмент кода запуска)

// First create a Generic HOC that embedds the branching logic for you.
const branch = (predicate, LeftComponent) => RightComponent => props => (
  predicate(props) ? <LeftComponent {...props} /> : <RightComponent {...props} />
);

// Leave your view component the only job of displaying data to the screen. Avoid any control flow.
const Test = () => 'this is a test component';
const Value = ({ value }) => <div>The Value is {value}</div>;

// Create a final component that branches accordingly with the needed check (if props.test is true)
const Component = branch(
  props => props.test,
  Test
)(Value);


ReactDOM.render(
  <Component test={true} value="£100" />,
  document.getElementById('container')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="container"></div>

Answer 2

Вы можете думать о функциональном компоненте как о методе рендеринга компонента класса, где вы можете делать то же самое, что вы делаете при рендеринге, за исключением того, что вы будете получать реквизит от arguments вместо this, и аналогично вы выиграли 'не имеет состояния, если вы не используете хуки.Таким образом, вы должны передать test в качестве опоры функциональному компоненту

const MyComponent = ({test}) =>{

    let value;
    if (test ===true) {
        test = (
        <p>This is a test</p>
        )
    }

    return(
        {value}
    )

}