Question

我在React中编写了以下TodoApp：

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <title>React! React! React!</title>

</head>
<body>
  <div class="container">
    <div id="container" class="col-md-8 col-md-offset-2">  </div>
  </div>

  <script type="text/babel">
  console.clear();

  const Title = () => {
    return (
      <div>
         <div>
            <h1>to-do</h1>
         </div>
      </div>
    );
  }

  const TodoForm = ({addTodo}) => {
    // Input Tracker
    let input;
    // Return JSX
    return (
      <div>
        <input ref={node => {
          input = node;
        }} />
        <button onClick={() => {
          addTodo(input.value);
          input.value = '';
        }}>
          +
        </button>
      </div>
    );
  };

  const Todo = ({todo, remove}) => {
    // Each Todo
    return (<li onClick={() => {remove(todo.id)}}>{todo.text}</li>);
  }

  const TodoList = ({todos, remove}) => {
    // Map through the todos
    const todoNode = todos.map((todo) => {
      return (<Todo todo={todo} key={todo.id} remove={remove}/>)
    });
    return (<ul>{todoNode}</ul>);
  }

  // Contaner Component
  // Todo Id
  window.id = 0;
  class TodoApp extends React.Component{
    constructor(props){
      // Pass props to parent class
      super(props);
      // Set initial state
      this.state = {
        data: []
      }
    }
    // Add todo handler
    addTodo(val){
      // Assemble data
      const todo = {text: val, id: window.id++}
      // Update data
      this.state.data.push(todo);
      // Update state
      this.setState({data: this.state.data});
    }
    // Handle remove
    handleRemove(id){
      // Filter all todos except the one to be removed
      const remainder = this.state.data.filter((todo) => {
        if(todo.id !== id) return todo;
      });
      // Update state with filter
      this.setState({data: remainder});
    }

    render(){
      // Render JSX
      return (
        <div>
          <Title />
          <TodoForm addTodo={this.addTodo.bind(this)}/>
          <TodoList
            todos={this.state.data}
            remove={this.handleRemove.bind(this)}
          />
        </div>
      );
    }
  }
  ReactDOM.render(<TodoApp />, document.getElementById('container'));
  </script>
</body>
</html>

问题：

这是什么语法：

const TodoForm = ({addTodo}) => {
    // Input Tracker
    let input;
    // Return JSX
    return (
      <div>
        <input ref={node => {
          input = node;
        }} />

我想我得到的是ref但是花括号里面的那个节点是什么？如果它是一个函数声明，node周围的括号在哪里？到底是怎么回事？

另外，最后，我们渲染TodoApp，呈现TodoForm，如下所示：

<TodoForm addTodo={this.addTodo.bind(this)}/>

这是否只是将addTodo传递给功能声明的组件，而不是props，而只是一个参数？

const TodoForm = ({addTodo}) => {

这是对的吗？ addTodo只是作为一个论点，而不是props？

Answer 1

所以在以下函数中

destructuring in ES6

第一行是const TodoForm = ({addTodo}) => {的一个例子。addTodo道具传递到TodoForm组件是无状态的，在道具中你有addTodo作为道具在我们提取的所有道具中node

同样对于refs，正在遵循回调方法。编写函数是一种ES6风格。这里{}是一个参数，它不包含任何括号，因为它是一个参数，ES6使您可以灵活地省略括号。同样在input里面你有函数的主体

在您的代码节点中引用DOM元素，并且您将其引用分配给已定义的变量input。现在，您可以使用<input ref="myValue"/>引用DOM，而不是将ref指定为this.refs.myValue，然后将其引用为{{1}}。

我希望能够正确解释。

在React参考回调方法上阅读以下 documentation ，以获得详细说明。

Answer 2

我们说我们有这个：

const TodoForm = (data) => {
  const addTodo = data.addTodo //can be const myFunc = data.addTodo
  // Input Tracker
   ...

作为一项改进，我们可以这样做：

const TodoForm = (data) => {
  const {addTodo} = data //can be const {addTodo as myFunc} = data
  // Input Tracker
   ...

再一次！作为一种增强，我们可以这样做： //注意我们直接移动{addTodo}来替换数据

const TodoForm = ({addTodo}) => { 
 //can be ({addTodo: myFunc}) => {
 // Input Tracker
   ...

将ref语法和组件作为纯函数进行反应

2 个答案: