React——Components and Props

在React中使用组件，可以将其拆解成独立存在，而且可重用，当一个组件需要修改UI，只需考虑该组件修改而不影响其他。
如何写一个简单的组件，其实很简单，将其写在一个函数中，例如下面的一个小例子：

1
2
3

function CompoDemo() {
  return <p>Hello!</p>;
}

这样就是一个简单的组件，在实际项目中，个人偏向于用ES6类去定义一个组件，官方文档中也有一个小例子，这个例子我也写在下面，以便对比参考：

class CompoDemo extends React.Component {
  render() {
    return <p>Hello!</p>;
  }
}

定义完这样的一个组件后，在其他的类中也可以进行复用，在其他类中直接导入即可。定义完一个组件后，如何进行使用？也很简单，代码如下：

ReactDOM.render (
  <CompoDemo />,
  document.getElementById(“view”)
);

官方的例子放在CodePen上，链接直达。
组件里面也可以嵌套其他组件，组件A已经存在，在组件B中可以对组件进行使用：

function CompoDemo_A () {…}
function CompoDemo_B (props) {
  return (
    <div className=”compo”>
      <CompoDemo_A />
      <p>{props.text}</p>;
    </div>
  );
}

根据上述代码，可以对组件进行嵌套引用，这样一个好处是，如果该UI是经常被使用，例如一个弹框样式，就可以独立出一个组件来进行复用。在CompoDemo_B组件中存在一个参数，该参数就为其属性，我们可以定义该属性。

1
2
3

const propsComment = {
  text: “hahaha”
}

最终将其渲染到页面中，官方完整例子。

ReactDOM.render(
  <CompoDemo_B text={propsComment.text};
  document.getElementById(“view”)
)

以上就是关于React中组件与属性的使用，写的不太好，最好还是看一遍官方的文档。