在 React 渲染函数中使用 jQuery

Question

我有以下 React 渲染函数：

   render: function () {
        return (
            <Popup onClose={this.props.onClose}>
                <Form entity="strategy" edit="/strategies/edit/" add="/strategies/add/">
                    <h2>Create/Edit Strategy</h2>
                    <StrategyForm pending={this.state.pending} formData={this.state.data} />
                    <div className="col-md-6">
                        <Assisting />
                    </div>
                </Form>
            </Popup>
        );
    }

我想让 h2 标题基于 body class，所以我的问题是...我可以这样做吗？

    render: function () {
        return (
            <Popup onClose={this.props.onClose}>
                <Form entity="strategy" edit="/strategies/edit/" add="/strategies/add/">
                    if ( $('body').hasClass("this") ) {
                     <h2>Create This Strategy</h2>
                    } else {
                     <h2>Create Another Strategy</h2>
                    }
                    <StrategyForm pending={this.state.pending} formData={this.state.data} />
                    <div className="col-md-6">
                        <Assisting />
                    </div>
                </Form>
            </Popup>
        );
    }

如果这是一个糟糕的想法，谁能告诉我在 React 中执行此操作的更好方法是什么？

Answer 1

正如在 OP 的一些评论中已经指出的那样，您可以做到这一点，但这并不是真正的 "React" 方式。

更好的解决方案可能是将 prop 传递到组件的使用中，或者在组件的状态上设置一个标志——然后使用该 prop/flag 进行渲染。

伪代码：

render() {
    return (
        if (this.props.someProp) {
            <h2>Create this Strategy</h2>
        } else {
            <h2>Create this Strategy</h2>
        }
    );
}

IMO 在组件方法中使用 jQuery 很好（例如 componentDidMount()，或其他 event/utility 方法），但通常您会希望在 render() 中避免这种情况. React 组件的全部目的是维护状态，因此像您的示例一样即时使用 jQuery 会打败这个想法。

例如，假设您以这种方式呈现您的组件：

ReactDOM.render(<MyComponent />, document.getElementById('some-div'));

您可以将属性传递给您的组件：

ReactDOM.render(
    <MyComponent someProp={true} />, 
    document.getElementById('some-div')
);

或者你的情况：

ReactDOM.render(
    <MyComponent someProp={$('body').hasClass("this")} />, 
    document.getElementById('some-div')
);

...类似的东西。这是一个过于简化的示例（未经测试，因此请注意语法错误），但这应该有助于解释我的思考过程。

或者，您可以在 class 上使用 componentDidMount() 方法。

componentDidMount() {
    this.setState({ 
        someProp : $('body').hasClass("this")
    });
}

然后在 render() 中检查 this.state.someProp.

在 React 渲染函数中使用 jQuery

Using jQuery inside of a React render function

javascript

jquery

if-statement

jsx

reactjs