Question

我正在使用ReactJS，我收到此错误：

内联Babel脚本：相邻的JSX元素必须包装在一个封闭标签。

还有一件事：我可以在我的组件中使用多个状态，怎么做？

这是我的代码：

class App extends React.Component (
    constructor(props) {
        super(props);

        this.state = {
            header: "Header from state...",
            data:[]
        }

        this.setStateHandler = this.setStateHandler.bind(this);   
    } 
    setStateHandler() {
        var item = "ReactJs :)"
        var myArray = this.state.data;
        myArray.push(item)
        this.setState({data: myArray}) 
    };  
    render(){ 
        return(  
            <p>{this.state.header}</p>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <p>State Array: {this.state.data}</p>  
        )
    }
}
export default App;

Answer 1

问题位于return，您returning多个html element，请将它们包装在div中。它将起作用。

原因：React组件不能return多个元素，但单个JSX表达式可以包含多个子元素，因此如果您需要一个组件到render多个东西，你可以将它们包装在div中。

不要忘记render()基本上是function，功能总是接受参数的数量，并且始终return只有一个值。

使用此：

render(){ 
   return(  
     <div>
        <p>{this.state.header}</p>
        <button onClick = {this.setStateHandler}>SET STATE</button>
        <p>State Array: {this.state.data}</p>  
     </div>
   )
}

您需要更改状态变量的更新方式。 永远不要直接改变状态变量。不是将值直接推送到状态变量数组，而是先创建一个副本，然后更新该值并将数据推回状态。像这样：

let a = this.state.data.slice();
a.push('React');
this.setState({data: a});

在单个组件中使用多个状态......？

你可以在状态对象中声明许多变量，但是多次声明状态对象没有任何意义。

检查工作示例：

＆＃13;

class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            header: "Header from state...",
            data:[]
        };

        this.setStateHandler = this.setStateHandler.bind(this);   
    } 
    setStateHandler() {
        var item = "ReactJs :)"
        var myArray = this.state.data.slice();
        myArray.push(item);
        this.setState({data: myArray}) 
    };  
    render(){ 
        return(  
            <div>
               <p>{this.state.header}</p>
               <button onClick = {this.setStateHandler}>SET STATE</button>
               <p>State Array: {this.state.data}</p>
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'))

＆＃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='app'/>

＆＃13;

错误：内联Babel脚本：相邻的JSX元素必须包装在一个封闭的标记中

1 个答案: