反应:如何将孩子作为字符串? [英] React: How to get children as string?

问题描述

我正在为我们正在构建的几个组件编写文档，因此文档(也是一个 React 组件如下所示:

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

)

看到 MyComponent 上的重复了吗?所以我创建了代码"组件来处理:

const Code = ({ children }) =>(<div>{孩子们}<代码>{孩子们}

)

那么 MyDoc 现在是:

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

但是由于 Code 中的 children 是一个对象，所以它不会呈现为字符串.

有没有办法做到这一点?或者也许是更好的解决方案?

解决方案

试试这个:

const MyComponent = ({标题}) =>(<div>{title}</div>)const MyDoc = () =>(<代码><MyComponent title="我的标题" obj={{obj: {obj: 1}}}><MyComponent title="我的另一个组件标题"><MyComponent title="我的另一个组件标题"/></我的组件></我的组件></代码>)常量代码 = ({孩子们}) =>(<div>{孩子们}<预><代码>{JsxString(儿童)}</code></pre>

)const JsxString = (component, counter = 0) =>{让 type = component.type.name;让道具 = component.props;让 propsString = "";for (let key in props) {如果(键！==孩子"){让 propValue = props[key];让值 = "";if (propValue instanceof Object) {value = `{${JSON.stringify(propValue).replace(/['"]+/g, '')}}`;} 别的 {value = `"${propValue}"`;}propsString += ` ${key}=${value}`;}}如果(道具.儿童){计数器 += 2;var children = JsxString(props.children, counter);返回 `<${type}${propsString}>${Array(counter).join(" ")} ${children}${Array(counter).join(" ")}</${type}>`;}返回 `<${type}${propsString}/>`;}ReactDOM.render(<MyDoc/>,document.getElementById('容器'));

I am writing documentation for a a couple of components we are building, so the doc (which is also a react component looks like this:

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

See the duplication on MyComponent? So I created the "Code" Component to handle that:

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

Then MyDoc now is:

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

But since children inside Code is a object, it will not render as string.

Is there a way to achieve this? Or maybe a better solution?

解决方案

Try this:

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')
);

这篇关于反应:如何将孩子作为字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！