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标题基于身体类，所以我的问题是......我可以这样做吗？

    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的一些评论中已经注意到的，你可以做到这一点，但它并不是真正的＆＃34; React＆＃34;方式。

更好的解决方案可能是将prop传递给组件的使用或在组件的状态上有一个标志 - 然后使用该prop / flag进行渲染。

伪代码：

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

在组件方法中使用jQuery的IMO很好（例如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。

在React渲染函数中使用jQuery

1 个答案: