Question

我的问题是关于JSX＆amp ;;中的有条件渲染使用this。

在我的React应用程序中考虑以下代码：

render() {
    return (
        <li onMouseEnter={this.mouseEnter}>
          //things
        </li>
      )
    }

我想有条件地呈现onMouseEnter属性，以便在调用组件的每个时间内不会应用并显示<li>标记。

例如：

render() { return ( <li {this.renderMouseEvents()} > ... </li> ) }

但是视觉工作室抱怨并说“[js]”......“预期”

显然，在HTML元素之外调用{ this.renderMouseEvents() }会接受使用this。

为什么this在JSX中的html元素中无效？

在JSX中完成此条件呈现的正确/清洁方法是什么？

感谢任何帮助，谢谢！

Answer 1

只需将条件插入属性：

import noop from 'lodash/noop';

render() {
    return (
        <li onMouseEnter={ifSatisfies ? this.mouseEnter : noop}>
          //things
        </li>
      )
    }

Answer 2

您所写的内容不是有效的JSX语法。请尝试以下方法：

function getConnection() { return $this->createConnection(); } function createConnection() { return oci_new_connect ("***", "****", "****"); }是一个返回mouseEnterBehaviorEnabled()或true的函数。在这里，您可以根据需要false触发逻辑。

查看MDN上的Short circuit evaluation。

mouseEnter

你当然也可以做到

render() {
  return (
    <li onMouseEnter={this.mouseEnterBehaviorEnabled() && this.mouseEnter} >
      ...
    </li>
  );
}

并在原始行为的其余部分之前在render() { return ( <li onMouseEnter={this.mouseEnter} > ... </li> ); }内运行您的逻辑。如果这些条件失败，只需返回false，其余的不会被执行。

Answer 3

您可以使用扩展运算符（ES6）和逻辑AND短路评估来完成：

...{ onClick: condition && this.handleClick }

示例：

＆＃13;
＆＃13;
const arr = ["1", "2", "3"]; class App extends React.Component { constructor(props) { super(props); } handleClick = e => { console.log(e.target.innerHTML); }; render() { return ( <div> {arr.map(o => { const myProps = { ...{ onClick: o != "1" && this.handleClick } }; return ( <li {...myProps}> {o} </li> ); })} </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));
＆＃13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

你可以在JSX中使用this，我认为这不是问题。

如果this出现问题，可能会在您的方法renderMouseEvents中，您是bind还是this吗？

但是我觉得它不起作用，因为你的方法renderMouseEvents正在返回。虽然，可以注入属性，检查一下，它可能会有所帮助：

Dynamic attribute in ReactJS

Answer 5

如果我理解你的要求，我相信你遇到的问题必须处理JSX如何转换成JavaScript。

<el arg1="1" arg2="2">3</el>

被翻译成类似于以下内容的内容：

React.createElement('el', { arg1: '1', arg2: '2' }, '3');

假设您的renderMouseEvents()返回{ onMouseEnter: this.mouseEnter }，您写的内容可能会尝试这样翻译：

React.createElement('li', { { onMouseEnter: this.mouseEnter } }, '...');

这是无效的JavaScript。编译器告诉你它期待...（JavaScript扩展语法），这可能会解决这个问题。

正如noppa所提到的，可能有更好的方法来实现你想要的。您能否更具体地了解您所面临的问题？

为什么我不能在JSX渲染的html元素中使用“this”？

5 个答案: