美文网首页
React 组件

React 组件

作者: 凌雲木 | 来源:发表于2018-03-28 19:17 被阅读5次
<div id="root1">
    <!-- This element's contents will be replaced with your component. -->
</div>
<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>
//渲染元素
const element1 = <h1>React API</h1>;
ReactDOM.render(
  element1,
  document.getElementById('root1')
);

//渲染组件
function Welcome(props) {
  return <h1>{props.name}</h1>;
};
const element = <Welcome name="Sa3ra" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

结果:

React API
Sa3ra
//渲染元素
const element1 = <h1>React API</h1>;
ReactDOM.render(
  element1,
  document.getElementById('root1')
);

//渲染组件间调用
function Welcome(props) {
  return <h1>{props.name}</h1>;
};
function APP(){
return   <Welcome name="Sa3raEEEE组件" />
  
};
//const element = <Welcome name="Sa3ra" />;
ReactDOM.render(
  <APP/>,
  document.getElementById('root')
);

结果:

React API
Sa3raEEEE组件

相关文章

  • React基础

    React包含react元素和react组件 react元素 react组件 react组件分为函数组件和类组件 ...

  • 组件

    组件是React的基石,所有的React应用程序都是基于组件的。React组件,可以通过React.createC...

  • ReactNative学习笔记(三)Hello World!

    React Native 看起来很像 React,但React Native的基础组件是原生组件 不是web组件。...

  • react子组件向父组件传值

    相关资料:react 父组件怎么获取子组件的这个值React组件间信息传递方式react同级组件之间传值 • 父...

  • React 进阶二 组件详解

    React组件 React的组件大概分为俩部分,无状态组件和有状态组件 无状态组件。下面React官网中定义的一个...

  • 2、react基础介绍

    React理念 划分组件边界的原则 React组件的数据种类 React组件的声明周期 组件的划分 高内聚 低耦合...

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • react16.3-jest

    功能组件和UI组件 react-antd 命名 react 规定组件开头都为大写,所以如果react项目如果用an...

  • 如何创建React组件并发布到npm?

    实现步骤: 创建React组件项目; 创建测试项目并引用组件; 发布React组件到npm上; 一、创建React...

  • RN原始项目-HelloWorld

    React Native看起来很像React,只不过其基础组件是原生组件而非web组件,。要理解React Nat...

网友评论

      本文标题:React 组件

      本文链接:https://www.haomeiwen.com/subject/qclucftx.html