Reactjs React ref语法和组件作为纯函数_Reactjs

Reactjs React ref语法和组件作为纯函数

reactjs

Reactjs React ref语法和组件作为纯函数,reactjs,Reactjs,我用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"><

我用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>

这是否只是将addTodo传递给函数声明的组件，而不是作为

props

，而仅仅是一个参数

const TodoForm=（{addTodo}）=>{

这是否正确？

addTodo

仅作为一个参数而不是作为

props

？

出现在下面的函数中

 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 TodoForm=（{addTodo}）=>{
//输入跟踪器
让输入；
//返回JSX
返回(
{
输入=节点；
}} />
{
addTodo（输入值）；
input.value=''；
}}> 
+
);
};

第一行是ES6中

解构的一个例子

发生的事情是在

const TodoForm=（{addTodo}）=>{

props获得对TodoForm组件的传递，该组件是无状态的，在props中，您将

addTodo

作为一个道具，因此在我们提取的所有道具中

addTodo

同样对于REF，也采用了回调方法。编写函数是ES6风格。这里的

节点

是一个参数，它不包含任何括号，因为它是一个单独的参数，ES6为您提供了省略括号的灵活性。同样在

{}

中，您拥有函数体

在代码中，节点引用DOM元素，并将其引用分配给已定义的变量

input

。现在可以使用

input

引用DOM，而不是将ref分配为

，然后将其引用为

this.refs.myValue

我希望我能正确地解释它

阅读以下关于React ref回调方法的了解详细解释。

假设我们有这个方法：

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

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

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