Question

嗨，谢谢你们在这里的出色工作。我在reactjs中很新，我正努力让它像jsfiddle一样使用sandbox。

我有一个名为“app-content”的div，它应该出现在文档的中间，如下所示：

由于某些原因，我无法在我的沙盒上制作以下内容，我得到以下内容：https://jsfiddle.net/w7sf1er6/8/

JS在这里

export default class App extends React.Component {
    render() {
    return (
    <div className="app-content">
    </div>
        );
    }  
};

ReactDOM.render (
    <App />,
    document.getElementById('root')
);

和CSS在这里

html {
  background-color: #e3e3e3;
  font-family: regular, arial, sans-serif; }

body {
  margin: 0 !important;
  padding: 0 !important; }

a {
  text-decoration: none; }

.app-content {
  width: 1200px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  background-color: white; }

我在做什么？我需要让它在JSfiddle上工作，这样我就可以与其他开发人员分享。我会感谢社区的一些帮助。

感谢。

Answer 1

如果您尚未安装反应块，则必须先通过npm安装。

像这样，npm install react-blocks

完成此操作后，您需要在反应代码中导入/需要react-blocks。

    // using an ES6 transpiler 
import Block from 'react-blocks';

// not using an ES6 transpiler 
var Block = require('react-blocks');

接下来，布局：

// Normal Flex layout 
const App = () => {
  return (
    <Block layout>
      <div>Alpha</div>
      <div>Beta</div>
    </Block>
  );
};

// Reverse Flex layout 
const Reverse = () => {
  let { reverse } = styles;
  return (
    <Block style={reverse.block} layout vertical reverse>
      <div>Alpha</div>
      <div flex>Beta</div>
    </Block>
  );
};

欢迎阅读有关流程here的更多信息。

希望这有帮助！

Answer 2

您的React组件未呈现给div。您可以在控制台日志中看到错误并执行＆＃34;查看帧源＆＃34;在HTML输出窗格中将显示＆＃34; div＆＃34;元素尚未被替换。

正如Chris建议的那样，只需从正确设置React的JSFiddle example开始。

上面的示例主要与您的代码的不同之处在于它导入了React定义。

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js" />

如何在reactjs中出现一个块？

2 个答案: