Почему я не могу использовать camelCase для именования компонентов функции реагирующей стрелки при использовании хуков? - PullRequest
Новая
       1

Почему я не могу использовать camelCase для именования компонентов функции реагирующей стрелки при использовании хуков?

0 голосов
/ 06 июня 2019

Смущающий для меня вопрос: по соглашению я даю имя для компонентов функции стрелки в реакции, начиная с строчной буквы: 

const todo = () => {
    return (
        <div>

        </div>
    )
}

export default todo

Затем я пытаюсь использовать хук 'useState',и имеют ошибку: 

Failed to compile.

./src/components/Todo.js
  Line 4:  React Hook "useState" is called in function "todo" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Для успешной компиляции мне нужно переименовать компонент как 'Todo'

В App.js я использую его следующим образом: 

import Todo from './components/Todo'

И это нормально, но когда я использую хук, я получаю ошибку.Что не так с именами?

UPD

Полный код компонента.Я хочу переименовать его в const todo, а не в const Todo.Почему я получаю ошибку? 

import React, {useState} from 'react'

const Todo = props => {
    const [todoName, setTodoName] = useState('')
    const [todoList, setTodoList] = useState([])

    // const [todoState, setTodoState] = useState({userInput: '', todoList: []})

    const inputChangeHandler = (event) => {
        setTodoName(event.target.value)
        // setTodoState({
        //    userInput: event.target.value,
        //    todoList: todoState.todoList 
        // })
    }

    const todoAddHandler = () => {
        setTodoList(todoList.concat(todoName))
        // setTodoState({userInput: todoState.userInput, todoList: todoState.todoList.contact(todoState.userInput)})
    }

    return (
      <div>
        <input type='text' placeholder='Todo' onChange={inputChangeHandler} value={todoName} />
        <button onClick={todoAddHandler}>Add todo</button>
        <ul>
          {todoList.map(todo => (
            <li key={todo}>{todo}</li>
          ))}
        </ul>
      </div>
    )
}

export default Todo

1 Ответ

1 голос
/ 06 июня 2019

Имена не имеют значения при экспорте.Это важно, когда вы оказываете.Например: 

import todo from './components/todo';
<todo /> // error

, то же самое: 

import Todo from './components/todo';
<Todo /> // ok

Реактивный JSX-компонент должен быть написан заглавными буквами.

...