Reactjs 反应：如何让孩子成为字符串？

我正在为我们正在构建的几个组件编写文档，因此doc（也是一个react组件）如下所示：

const myDoc = () => (
  <div>
    <MyComponent title="MyTitle" />
    <code className="language-jsx">
       {`<MyComponent title="MyTitle" />`}
    </code>
  </div>
)

那么MyDoc现在是：

const myDoc = () => (
  <Code>
    <MyComponent title="MyTitle" />
  </Code>
)

constmydoc=（）=>(


)

但由于代码中的子对象是对象，所以它不会呈现为字符串

---

有没有办法做到这一点？或者可能有更好的解决方案？

您并没有真正的重复。因为第一个

是（编译和复制）的代码运行，但第二个是要显示的字符串。从JSX编译到JS后，它们之间没有太多相似性，这使得以一般方式从另一个中获取一个非常困难

我建议干脆就按原样走。

试试这个：

const MyComponent = ({
  title
}) => (
  <div>{title}</div>
)

const MyDoc = () => (
  <Code>
    <MyComponent title="My title" obj={{obj: {obj: 1}}}>
      <MyComponent title="My another component title">
        <MyComponent title="My another component title" />
      </MyComponent>
    </MyComponent>
  </Code>
)

const Code = ({
  children
}) => (
  <div>
    {children}
    <pre><code>
      {JsxString(children)}
      </code></pre>
  </div>
)

const JsxString = (component, counter = 0) => {
  let type = component.type.name;
  let props = component.props;
  let propsString = "";
  for (let key in props) {
    if (key !== "children") {
      let propValue = props[key];
      let value = "";
      if (propValue instanceof Object) {
        value = `{${JSON.stringify(propValue).replace(/['"]+/g, '')}}`;
      } else {
        value = `"${propValue}"`;
      }
      propsString += ` ${key}=${value}`;
    }
  }
  if (props.children) {
    counter += 2;
    var children = JsxString(props.children, counter);
    return `<${type}${propsString}>
${Array(counter).join(" ")}  ${children}
${Array(counter).join(" ")}</${type}>`;
  }
  return `<${type}${propsString} />`;
}

ReactDOM.render(
  <MyDoc />,
  document.getElementById('container')
);

) 常量JsxString=（组件，计数器=0）=>{ 让type=component.type.name； 设props=component.props； 让propsString=“”； 用于（让输入道具）{ 如果（键！=“子项”）{ 让propValue=props[key]； 让值=”； if（对象的propValue实例）{ value=`{${JSON.stringify（propValue）.replace（/['''']+/g'，）}`； }否则{ value=`${propValue}`； } propssString+=`${key}=${value}`； } } 如果（道具、儿童）{ 计数器+=2； var children=JsxString（props.children，counter）； 返回` ${Array（counter.join（“”）}${children} ${Array（counter.join（“”）}`； } 返回``； } ReactDOM.render( , document.getElementById（'容器'） );

---

我也在编写文档，我也不想每次更改demo时都更改标记文件。我想要类似element.innerHTML的东西

我偶然发现了这个答案，在进一步的搜索中，我在github中找到了这个名为的包

---

仅提一提，以防其他人也在尝试编写文档，并在本文中遇到问题。

安装它的好主意。我在使用它时发现了一些错误（例如：当孩子是一组项目时（siblings））。不过，这是一个好的开始。谢谢！请尝试在您的答案中包含文本，以配合您发布的代码。额外的文本可添加上下文，并有助于使您的答案更具体。如果您还记得那么远的话，您最终得到了什么解决方案。对于我来说，已接受的答案立即失败。

const MyComponent = ({
  title
}) => (
  <div>{title}</div>
)

const MyDoc = () => (
  <Code>
    <MyComponent title="My title" obj={{obj: {obj: 1}}}>
      <MyComponent title="My another component title">
        <MyComponent title="My another component title" />
      </MyComponent>
    </MyComponent>
  </Code>
)

const Code = ({
  children
}) => (
  <div>
    {children}
    <pre><code>
      {JsxString(children)}
      </code></pre>
  </div>
)

const JsxString = (component, counter = 0) => {
  let type = component.type.name;
  let props = component.props;
  let propsString = "";
  for (let key in props) {
    if (key !== "children") {
      let propValue = props[key];
      let value = "";
      if (propValue instanceof Object) {
        value = `{${JSON.stringify(propValue).replace(/['"]+/g, '')}}`;
      } else {
        value = `"${propValue}"`;
      }
      propsString += ` ${key}=${value}`;
    }
  }
  if (props.children) {
    counter += 2;
    var children = JsxString(props.children, counter);
    return `<${type}${propsString}>
${Array(counter).join(" ")}  ${children}
${Array(counter).join(" ")}</${type}>`;
  }
  return `<${type}${propsString} />`;
}

ReactDOM.render(
  <MyDoc />,
  document.getElementById('container')
);