反应：如何从函数组件中的render（）方法执行条件检查？

Question

在我的普通React类组件中，在返回条件html呈现之前，我在render（）方法中做了一些检查。现在，我正在使用一个react函数组件，它显然没有render（）方法。。。我如何在这里进行条件检查？就在普通函数中，然后从这些函数返回html代码？

e、 g类组件：

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

您可以将functional component视为类组件的一种呈现方法，在该方法中，您可以执行与在render中完全相同的操作，只是您将从参数而不是this接收道具，并且类似地，除非您使用钩子，否则您将没有状态。因此，您将通过test作为功能组件的道具

const MyComponent = ({test}) =>{

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

    return(
        {value}
    )

}

Answer 2

正如其他人所说，您可以在渲染函数内执行任何操作，与使用类组件执行的操作相同。您可以将函数组件视为类组件的呈现函数。。。

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

您可能想看看recompose，我的示例从中获得了灵感。（更改test属性并按RunCodeSnippet）

// 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>