Question

CODE：

这会产生以下错误：

main.js：18463未捕获错误：不变违规：对象不是作为React子句有效（找到：具有键{ingredientsList}的对象）。如果你打算渲染一个孩子的集合，而不是使用数组使用React附加组件中的createFragment（object）包装对象。检查var React = require('react'); var Ingredient = require('./Ingredient.jsx') var Recipe = React.createClass({ getInitialState: function() { return { showIngredients: false }; }, handleClick: function() { this.setState({ showIngredients: !this.state.showIngredients }); }, render: function() { var i = 0; var ingredientsList = this.props.ingredients.map(function(item) { i++; return <Ingredient key={i} name={item}/>; }); return ( <table> <tbody> <tr className="recipeName" onClick={this.handleClick}> <td>{this.props.name}</td> </tr> {this.state.showIngredients ? {ingredientsList} : null } </tbody> </table> ); } }); module.exports = Recipe;的呈现方法。

Answer 1

删除此处不需要的{}，将其写为：

{this.state.showIngredients ? ingredientsList : null }

或者使用div或tr或其他任何html element和render内的ingredientsList，如下所示：

{this.state.showIngredients ? <tr> {ingredientsList} </tr> : null }

原因：{}需要将js代码放入html个元素中，当您使用ternary operator时，您已经在js内{} 1}}无需使用class App extends React.Component { render() { let a = [1,2,4].map(el=> <div key ={el}>{el}</div>) return ( <div> {1 == 1 ? a : null} {1 == 1 ? <div> {a} </div> : null} </div> ) } } ReactDOM.render(<App />, document.getElementById('container'));。

检查示例：

<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='container' />

Traceback (most recent call last):
  File "D:\test\test1.py", line 1, in <module>
    import selenium.webdriver;
ModuleNotFoundError: No module named 'selenium'

Answer 2

问题在于您尝试将普通JS对象渲染为React元素。如果的条目是React元素，那么可以呈现一个普通的JS数组，这就是ingredientsList的样子。如果你从这个数组周围删除括号，我认为这应该有效。

（即将{ingredientsList}更改为ingredientsList）

如何将对象置于三元条件中？

2 个答案: