2

我有以下反应渲染功能：

   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 中什么是更好的方法吗？

4

1 回答 1

2

正如在 OP 的一些评论中已经指出的那样，您可以这样做，但这并不是真正的“反应”方式。

更好的解决方案可能是将 a 传递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.

于 2016-03-03T19:18:08.363 回答