J'ai le TodoApp suivant écrit en React:

<!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>

Des questions:

Quelle est cette syntaxe:

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

Je pense avoir compris ce qu'est ref mais quel est ce nœud juste à l'intérieur des accolades? S'il s'agit d'une déclaration de fonction, où se trouvent les parenthèses autour de node? Que se passe-t-il?

Aussi, à la fin, nous rendons le TodoApp qui rend TodoForm comme ceci:

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

Est-ce que cela passe simplement addTodo au composant fonctionnellement déclaré, non pas comme props, mais simplement comme un argument?

const TodoForm = ({addTodo}) => {

Est-ce correct? addTodo entre simplement en tant qu'argument et non en tant que props?

1
Jwan622 16 janv. 2017 à 09:38

2 réponses

Meilleure réponse

Donc dans la fonction suivante

 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>
    );
  };

La première ligne est un exemple de destructuring in ES6 Ce qui se passe, c'est que dans const TodoForm = ({addTodo}) => {, les props obtiennent des passes vers le composant TodoForm qui est sans état et dans les accessoires, vous avez addTodo comme accessoire donc hors de tout les accessoires que nous extrayons addTodo

Aussi pour les refs, une approche de rappel est suivie. C'est un style ES6 pour écrire une fonction. Ici node est un argument et il ne contient aucune parenthèse car il s'agit d'un argument unique et ES6 vous donne la possibilité d'omettre la parenthèse. Aussi à l'intérieur du {} vous avez le corps de la fonction

Dans votre code, le nœud fait référence à l'élément DOM et vous attribuez sa référence à la variable input que vous avez définie. Vous pouvez maintenant faire référence au DOM avec input plutôt que d'attribuer ref en tant que <input ref="myValue"/>, puis en le référençant comme this.refs.myValue.

J'espère avoir été en mesure de l'expliquer correctement.

Lisez la documentation sur l'approche de rappel de React ref pour une explication détaillée.

1
Shubham Khatri 16 janv. 2017 à 06:57

Disons que nous avons celui-ci:

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

Comme amélioration, nous pouvons le faire comme ça:

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

Une fois de plus ! comme amélioration, nous pouvons le faire comme ça: // remarquez que nous avons déplacé le {addTodo} directement pour remplacer les données

const TodoForm = ({addTodo}) => { 
 //can be ({addTodo: myFunc}) => {
 // Input Tracker
   ...
0
challenger 16 janv. 2017 à 15:47