查找嵌套在html元素中的React组件

Question

我试图编写一个可重用的组件，以便在将来的项目中使用。 只要组件“ T”没有嵌套在html元素中，我编写的代码就可以工作。

我写的localize.js如下；

import React, { Component } from 'react';

const Localizeit = (props) => {
  let textWithLanguageProps = React.Children.map(props.children, function(child) {
    let { s } = child.props; 
    if (React.isValidElement(child)){
        return React.cloneElement(child, {lang : props.data[s]} );
      } 
      return child;
  });
  return (
    <div>
      {textWithLanguageProps}
    </div>
  )
}

const T = ({lang}) => (
  <span>{lang}</span>
)


export { Localizeit , T};

在使用翻译组件的组件中，将要渲染的所有内容都包装在其中，然后该组件检查是否存在有效的react元素。 如果存在，则将它们与道具lang以及字符串一起渲染。 只要不嵌套组件，此方法就起作用。 我还没有想出解决这个问题的方法。 我是否必须深入检查html元素是否具有嵌套的react组件？

demo.js如下;

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Localizeit, T } from './localize';

const en = {
            hello: "hello world",
            works: "it works weirdly enough"
           }

const es = {
            hello: "hola mundo",
            works: "funciona bastante raro"
           }
const tr = {
            hello: "merhaba dunya",
            works: "garip bir sekilde calisiyor."
           }


class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lang: en
    }
  }
  render() {
    return (
      <div>
        <Localizeit data={this.state.lang}>
          <button onClick={() => this.setState({ lang: en })}>en</button>
          <button onClick={() => this.setState({ lang: tr })}>tr</button>
          <button onClick={() => this.setState({ lang: es })}>es</button>
          <h1>react-localizeit Demo</h1>
          <T s="hello" />
          <br />
          <p>Following doesn't work</p>
          <span><T s="works" /></span>
        </Localizeit>
      </div>
    )
  }
}

render(<Demo />, document.getElementById('root'))

可以在此处找到有效的演示。

Answer 1

我有一个渲染道具版本的工作原型。 在这里，我可以根据需要嵌套，并且仍然可以使用。

const en = {
  hello: "hello world",
  works: "it works weirdly enough"
};
const es = {
  hello: "hola mundo",
  works: "funciona bastante raro"
};
const tr = {
  hello: "merhaba dunya",
  works: "garip bir sekilde calisiyor."
};
const data = { en, es, tr };

class Localize extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lang: props.initialLanguage || "en"
    };
  }
  render() {
    if(!this.props.data) return null;

    return this.props.render({
      selectedLanguage: this.state.lang, 
      onChange: lang => this.setState({ lang }),
      dict: (this.props.data[this.state.lang]) || {}
    });
  }
}

const App = () => (
  <Localize
    data={data}
    initialLanguage="en"
    render={({ dict, onChange, selectedLanguage}) => (
      <div>

        <h1>localize</h1>
        <div>You have selected: {selectedLanguage}</div>

        <button onClick={() => onChange("en")}>en</button>
        <button onClick={() => onChange("es")}>es</button>
        <button onClick={() => onChange("tr")}>tr</button>
        <div>{dict.hello}</div>
        <div>{dict.works}</div>
        <div>
          <div>
            <span>{dict.hello}</span>
          </div>
          <div>
            <span>{dict.works}</span>
          </div>
        </div>
      </div>
    )}
  />
);

ReactDOM.render(<App />, document.querySelector("#root"));

沙箱示例https://codesandbox.io/s/218vx9oo5r

Answer 2

React组件类型是一个函数，而不是一个常规组件，它是一个字符串。

这是我的解决方案：

function buildChildrenWithProps(children, props) {
    return React.Children.map(children, (child) => {

        // if not a valid Component
        if (typeof child.type !== 'function') {
            return child;
        }

        return React.cloneElement(child, Object.assign({}, child.props, props));
    });
}

用法是这样的：

render(){
    const _children = buildChildrenWithProps(this.props.children, {/*props*/});

    return (
       <div>{_children}</div>
    );
}