클래스에서 클래스 이름을 사용할 수 있다는 것을 알고 있지만 클래스가 없기 때문에 후크를 사용하고 있기 때문에 함수에서 사용하고 싶다고 가정하겠습니다. 이것은 내 코드입니다.
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { classNames } from "classnames";
import './index.css';
var [a1, b1, c1] = [];
var finished = false;
function Square(props) {
var classes = classNames({"square":!finished,"squares":props.valid&&finished,"squarez":finished&&!props.valid})
return (
<button className={classes} onClick={() => props.onClick()}>
{props.value}
</button>
);
}
function Board() {
const [arr, setArr] = useState(Array(9).fill(null));
const [xIsNext, setXIsNext] = useState(true);
function handleClick(i) {
if (!arr[i] && !winner) {
const squares = arr.slice();
squares[i] = xIsNext ? 'X' : 'O';
setArr(squares);
setXIsNext(!xIsNext);
}
}
function renderSquare(i) {
return <Square value={arr[i]} onClick={() => handleClick(i)} valid={a1 === i || b1 === i || c1 === i ? true : false} />;
}
const winner = calculateWinner(arr);
const status = winner ? 'Winner is: ' + winner : 'Next player: ' + (xIsNext ? 'X' : 'O');
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{renderSquare(0)}
{renderSquare(1)}
{renderSquare(2)}
</div>
<div className="board-row">
{renderSquare(3)}
{renderSquare(4)}
{renderSquare(5)}
</div>
<div className="board-row">
{renderSquare(6)}
{renderSquare(7)}
{renderSquare(8)}
</div>
</div>
);
}
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div><button onClick={Board}>alaa </button></div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
function calculateWinner(squares) {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
[a1, b1, c1] = lines[i];
finished = true;
return squares[a];
}
}
return null;
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
다음과 같은 오류가 발생합니다. TypeError : Object (...) is not a function. 이에 대한 해결 방법은 무엇입니까? 참고로이 프로젝트에 대한 모든 코드를 추가했습니다. 튜토리얼 섹션의 Reacts의 공식 웹 사이트에서 이것을 가져 왔지만 약간 놀았습니다.
classNames를 잘못 가져오고 있습니다. 이럴거야
import classNames from "classnames";
이것이 당신이 성취하고 싶은 것입니까?
function classes(finished, props){
return classNames({
"square":!finished,
"squares":props.valid && finished,
"squarez":finished && !props.valid
})
}
function Square(props) {
let finished = true;
return (
<button className={classes(finished,props)} onClick={() => props.onClick()}>
{props.value}
</button>
);
}
라이브 코드 샌드 박스
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다