在 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 类，所以我的问题是……我可以这样做吗？

    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 上的一些 cmets 中已经指出的那样，您可以这样做，但这并不是真正的“React”方式。

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

伪代码：

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

IMO 在组件方法中使用 jQuery 很好（例如 componentDidMount()，或其他事件/实用程序方法），但通常你会希望在 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')
);

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

---

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

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

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