how to use dynamic component in react with jsx?

作者: sanye
时间: 2023-02-26
分类: React/RN
评论

React.js allows for dynamic component rendering with the use of the React.createElement() method. This method takes in three arguments: the component type, an object of props, and any child elements or text. You can then use JSX syntax to create your component, like so:

 const MyComponent = (props) => {
  return (
    <React.Fragment>
      {React.createElement('MyComponent', props, "Hello World!")}
    </React.Fragment>
  )
}

受控组件和非受控组件

作者: sanye
时间: 2023-02-26
分类: 大前端,Vue,React/RN
评论

受控组件是受应用状态的控制的，而非受控组件则不受应用状态的控制。下面是一个受控组件的代码示例：

 
class ControlledInput extends React.Component { 
  constructor(props) { 
    super(props); 
   
    // 将state更新传递给value 
    this.state = { 
      input: "" 
    }; 
   
    this.handleInputChange = this.handleInputChange.bind(this); 
  } 
 
  handleInputChange(event) { 
    this.setState({ input: event.target.value }); 
  } 
 
  render() { 
    return ( 
      <input  
        value={ this.state.input }  
        onChange={ this.handleInputChange }  
      /> 
    ); 
  } 
}

is it any npm package in react like vuedraggable in vue.js ?

作者: sanye
时间: 2023-02-26
分类: React/RN
评论

Yes, there are some npm packages for drag and drop in React. Some popular ones include react-dnd, react-beautiful-dnd, and react-draggable.

one example about React FC define with tsx

作者: sanye
时间: 2023-02-22
分类: React/RN
评论

Let's create a React functional component with typescript and JSX:

 import React from 'react';
 interface MyProps {
  name: string;
}
 const MyComponent: React.FC<MyProps> = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
};
 export default MyComponent;