Question

在我正常的React类组件中，在返回条件html渲染之前，我已经对render（）方法进行了一些检查。现在，我正在使用一个反应功能组件，该组件显然没有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

正如其他人所述，您可以在render函数中执行任何操作，就像您可以对类组件执行的操作一样。您可以将功能组件视为类组件的呈现功能...

顺便说一句，功能组件不应包含太多业务逻辑，最好通过HOC和功能组合来增强它们。

您可能想看看recompose，我的示例从中汲取了灵感。（更改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}
    )

}

反应：如何从功能组件中的render（）方法进行条件检查？

2 个答案: